Rounded corners.

Discussion in 'HTML' started by dorayme, Oct 28, 2006.

  1. dorayme

    dorayme Guest

    dorayme, Oct 28, 2006
    #1
    1. Advertising

  2. dorayme

    cwdjrxyz Guest

    dorayme wrote:
    > Anyone got any favourites re the best and simplest (or are these
    > too incompatible?) css strategies for rounded corners to boxes?
    > Lets say for plain colour backgrounds for both box and surrounds.
    >
    > The one at
    >
    > http://www.alistapart.com/articles/customcorners/
    >
    > as exemplified by
    >
    > http://www.alistapart.com/d/customcorners/step6.html
    >
    > breaks in Safari and Firefox from my tests.


    An example of one method I wrote is at
    http://www.cwdjr.net/geometric/cornersnew.html . It uses script to
    write the CSS, and arose from a question at the com.lang.javascript
    group. It works on my several browsers including most recent versions
    of IE6, Opera, Firefox, Netscape, Seamonkey, and Mozilla. I don't know
    about Safari, since I don't think I can load a Safari browser on my
    Windows XP. You do use a small colored circle gif for the corners. The
    size of the circle is adjusted in the code as needed, depending on the
    radius of the corner you wish. The radius size of the circle gif needs
    to be no more than for the maximum radius you will use for corners, and
    it could be quite a bit smaller if the image is sharp. The background
    of the gif should be transparent, with the width and height of the gif
    the same as the diameter of the circle. I have a few circles other
    than black, but none in passion pink metallic or such :).
    cwdjrxyz, Oct 28, 2006
    #2
    1. Advertising

  3. dorayme

    dorayme Guest

    In article
    <>,
    "cwdjrxyz" <> wrote:

    > dorayme wrote:
    > > Anyone got any favourites re the best and simplest (or are these
    > > too incompatible?) css strategies for rounded corners to boxes?
    > > Lets say for plain colour backgrounds for both box and surrounds.
    > >
    > > The one at
    > >
    > > http://www.alistapart.com/articles/customcorners/
    > >
    > > as exemplified by
    > >
    > > http://www.alistapart.com/d/customcorners/step6.html
    > >
    > > breaks in Safari and Firefox from my tests.

    >
    > An example of one method I wrote is at
    > http://www.cwdjr.net/geometric/cornersnew.html . It uses script to
    > write the CSS, and arose from a question at the com.lang.javascript
    > group. It works on my several browsers including most recent versions
    > of IE6, Opera, Firefox, Netscape, Seamonkey, and Mozilla. I don't know
    > about Safari, since I don't think I can load a Safari browser on my
    > Windows XP. You do use a small colored circle gif for the corners. The
    > size of the circle is adjusted in the code as needed, depending on the
    > radius of the corner you wish. The radius size of the circle gif needs
    > to be no more than for the maximum radius you will use for corners, and
    > it could be quite a bit smaller if the image is sharp. The background
    > of the gif should be transparent, with the width and height of the gif
    > the same as the diameter of the circle. I have a few circles other
    > than black, but none in passion pink metallic or such :).


    Thanks cwd, I will take a look tomorrow. The last few hours, i
    have been messing about with the idea in

    http://kalsey.com/2003/07/rounded_corners_in_css/

    which I found via Google!

    I have it working withe colours I want and after all that, I am
    wondering if I really want rounded corners for the particular
    design I am working on! But I will for sure want this from time
    to time. I picked the one I did because I understood it! Which is
    more than I can say for the gymnastics of some of the css ones I
    have seen. But it is early days for me in this.

    --
    dorayme
    dorayme, Oct 28, 2006
    #3
  4. On Sat, 28 Oct 2006 06:39:11 +0100, dorayme wrote
    (in article <>):

    > Anyone got any favourites re the best and simplest (or are these
    > too incompatible?) css strategies for rounded corners to boxes?
    > Lets say for plain colour backgrounds for both box and surrounds.
    >
    > The one at
    >
    > http://www.alistapart.com/articles/customcorners/
    >
    > as exemplified by
    >
    > http://www.alistapart.com/d/customcorners/step6.html
    >
    > breaks in Safari and Firefox from my tests.


    I have these two bookmarked, but have never used them in anger, as it were:

    <http://www.neuroticweb.com/recursos/css-rounded-box/>

    <http://www.spiffycorners.com/>



    --
    Sally in Shropshire, UK
    bed and breakfast near Ludlow: http://www.stonybrook-ludlow.co.uk
    Burne-Jones/William Morris window in Shropshire church:
    http://www.whitton-stmarys.org.uk
    Sally Thompson, Oct 28, 2006
    #4
  5. dorayme wrote:
    > Anyone got any favourites re the best and simplest (or are these
    > too incompatible?) css strategies for rounded corners to boxes?
    > Lets say for plain colour backgrounds for both box and surrounds.
    >
    > The one at
    >
    > http://www.alistapart.com/articles/customcorners/
    >
    > as exemplified by
    >
    > http://www.alistapart.com/d/customcorners/step6.html
    >
    > breaks in Safari and Firefox from my tests.
    >

    Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 28, 2006
    #5
  6. dorayme

    patrick j Guest

    On Sat, 28 Oct 2006 13:46:19 +0100, Jonathan N. Little wrote
    (in article <9e05a$45435104$40cba7ad$>):

    >> http://www.alistapart.com/d/customcorners/step6.html
    >>
    >> breaks in Safari and Firefox from my tests.
    >>

    > Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?


    For me with Safari and FireFox 1.5 if I widen the window a lot then the
    header and footer sections literally break visually at the right. The
    ends come off, honest :) As long as the window is not too wide then it
    looks really good.

    I have a 20" screen with 96 dpi.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
    patrick j, Oct 28, 2006
    #6
  7. dorayme

    Kevin Scholl Guest

    If you don't mind a little Javascript involved, you can use the JQuery
    library and a small plugin to achieve different corners without images:

    http://www.malsup.com/jquery/corner/

    Some examples that I've been playing with:

    http://beta.ksscholl.com/nbuy/template.html
    http://beta.ksscholl.com/jquery/corners.html

    dorayme wrote:
    > Anyone got any favourites re the best and simplest (or are these
    > too incompatible?) css strategies for rounded corners to boxes?
    > Lets say for plain colour backgrounds for both box and surrounds.
    >
    > The one at
    >
    > http://www.alistapart.com/articles/customcorners/
    >
    > as exemplified by
    >
    > http://www.alistapart.com/d/customcorners/step6.html
    >
    > breaks in Safari and Firefox from my tests.
    >



    --

    *** Remove the DELETE from my address to reply ***

    ======================================================
    Kevin Scholl http://www.ksscholl.com/

    ------------------------------------------------------
    Information Architecture, Web Design and Development
    ------------------------------------------------------
    We are the music makers, and we are the dreamers of
    the dreams...
    ======================================================
    Kevin Scholl, Oct 28, 2006
    #7
  8. patrick j wrote:
    > On Sat, 28 Oct 2006 13:46:19 +0100, Jonathan N. Little wrote
    > (in article <9e05a$45435104$40cba7ad$>):
    >
    >>> http://www.alistapart.com/d/customcorners/step6.html
    >>>
    >>> breaks in Safari and Firefox from my tests.
    >>>

    >> Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?

    >
    > For me with Safari and FireFox 1.5 if I widen the window a lot then the
    > header and footer sections literally break visually at the right. The
    > ends come off, honest :) As long as the window is not too wide then it
    > looks really good.
    >
    > I have a 20" screen with 96 dpi.
    >


    Actually same here 1280 x 1024. But it could be easily solved by
    increasing the dims of the image:

    http://www.alistapart.com/d/customcorners/images/custom_corners_topleft.gif

    Currently at 800px × 600px

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 28, 2006
    #8
  9. dorayme

    dorayme Guest

    In article <9e05a$45435104$40cba7ad$>,
    "Jonathan N. Little" <> wrote:

    > dorayme wrote:
    > > Anyone got any favourites re the best and simplest (or are these
    > > too incompatible?) css strategies for rounded corners to boxes?
    > > Lets say for plain colour backgrounds for both box and surrounds.
    > >
    > > The one at
    > >
    > > http://www.alistapart.com/articles/customcorners/
    > >
    > > as exemplified by
    > >
    > > http://www.alistapart.com/d/customcorners/step6.html
    > >
    > > breaks in Safari and Firefox from my tests.
    > >

    > Donno works for me with Seamonkey 1.0.5 and Firefox 2.0, how does it break?


    <http://members.optushome.com.au/droovies/pics/crackStartsAt1020px
    AndThenGetsBiggerAndBigger.png>

    When window is wider than 1020, the crack starts and is what the
    Tamils want to do from Sri Lanka...

    --
    dorayme
    dorayme, Oct 28, 2006
    #9
  10. dorayme

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > I have a 20" screen with 96 dpi.


    I beat you, Patrick! One of my screens is 20" but 100 dpi.

    --
    dorayme
    dorayme, Oct 28, 2006
    #10
  11. dorayme

    dorayme Guest

    In article <>,
    Kevin Scholl <> wrote:

    > If you don't mind a little Javascript involved, you can use the JQuery
    > library and a small plugin to achieve different corners without images:


    Thanks Kevin... just for now I do want to stay with CSS... It is
    simpler than I thought in CSS in some ways...

    --
    dorayme
    dorayme, Oct 28, 2006
    #11
  12. dorayme

    dorayme Guest

    In article
    <>,
    Sally Thompson <> wrote:

    > I have these two bookmarked, but have never used them in anger, as it were:
    >
    > <http://www.neuroticweb.com/recursos/css-rounded-box/>


    This one looks interesting, similar to the one I was playing with
    yesterday but rather nice that one can and fiddle with the
    colours right there and then and get the images made then and
    there (how the hell do they do this, with php, js?). I messed
    about for a while making my own corners yesterday!

    Thanks, interesting one, downloaded a model for myself already.

    --
    dorayme
    dorayme, Oct 28, 2006
    #12
  13. dorayme

    Dylan Parry Guest

    dorayme wrote:
    > Anyone got any favourites re the best and simplest (or are these
    > too incompatible?) css strategies for rounded corners to boxes?
    > Lets say for plain colour backgrounds for both box and surrounds.


    If I ever need curvy corners I use the technique described at
    http://www.html.it/articoli/niftycube/index.html - it's implemented
    entirely through Javascript as a bells-and-whistles solution.

    --
    Dylan Parry
    http://electricfreedom.org | http://webpageworkshop.co.uk

    Programming, n: A pastime similar to banging one's head
    against a wall, but with fewer opportunities for reward.
    Dylan Parry, Oct 28, 2006
    #13
  14. dorayme

    dorayme Guest

    In article <>,
    Dylan Parry <> wrote:

    > dorayme wrote:
    > > Anyone got any favourites re the best and simplest (or are these
    > > too incompatible?) css strategies for rounded corners to boxes?
    > > Lets say for plain colour backgrounds for both box and surrounds.

    >
    > If I ever need curvy corners I use the technique described at
    > http://www.html.it/articoli/niftycube/index.html - it's implemented
    > entirely through Javascript as a bells-and-whistles solution.


    OK, I do like the idea of not having to use images... It uses
    javascript. I don't mind, the bottom line is the ease of making
    them, the best chance of them being seen in the browsers being
    used and their stability. Will look into it, thanks.

    --
    dorayme
    dorayme, Oct 28, 2006
    #14
  15. dorayme

    patrick j Guest

    On Sat, 28 Oct 2006 21:31:40 +0100, dorayme wrote
    (in article
    <>):

    > In article
    > <>,
    > patrick j <> wrote:
    >
    >> I have a 20" screen with 96 dpi.

    >
    > I beat you, Patrick! One of my screens is 20" but 100 dpi.


    I don't know how many more dots that is but it's a lot!

    On a, sort-of-related-but-not-very-much, note, I'm going to mention
    what a good thing Parallels is. This, for those that don't know, is
    emulation software for running Windows on a Mac. In fact you can run
    numerous OSes but I'm using it to run Windows XP.

    Anyway I mention it because I believe, Mr. dorayme, that you have a PC
    amongst your computer collection and that you check out for IE 6 on
    that no doubt.

    I only have my Intel iMac [0] and so I have only one screen. For the
    last couple of months to check up on what a web-site looks like then
    I'd use Boot Camp as I had Windows XP on a separate partition. The
    problem with Boot Camp is that you have to restart the computer and I
    find this to be a big drag.

    So today I've downloaded the demo of Parallels and I've installed my
    Windows XP on that.

    Boy is it good!

    It is hugely superior to any other emulator on the Mac I've encountered
    in the past, such as Virtual PC, it is very fast indeed. It's true that
    I'm only using it with Internet Explorer, in fact there are no programs
    installed on it apart from Windows XP standard ones, but it is very
    slick indeed.

    Anyway I'm sure I'm going to buy it now.

    When IE 7 comes out I'm going to create another "virtual machine" on my
    Parallels and install a copy of Windows on that to have IE 7.

    [0] It's not true that I only have an Intel iMac. In fact my attic has
    numerous Macs in it but they are all very old indeed. I keep Macs so
    long that they are worthless by the time I replace them so they just go
    into retirement in my attic. However in reality for actual use I have
    just the one computer.

    --
    Patrick
    Brighton, UK

    <http://www.patrickjames.me.uk>
    patrick j, Oct 29, 2006
    #15
  16. dorayme

    dorayme Guest

    In article
    <>,
    patrick j <> wrote:

    > On a, sort-of-related-but-not-very-much, note, I'm going to mention
    > what a good thing Parallels is. This, for those that don't know, is
    > emulation software for running Windows on a Mac. In fact you can run
    > numerous OSes but I'm using it to run Windows XP.
    >
    > Anyway I mention it because I believe, Mr. dorayme, that you have a PC
    > amongst your computer collection and that you check out for IE 6 on
    > that no doubt.


    Well, Mr (cough, splutter, cough) dorayme - if it be so, should
    really be Mr Dorayme. But anyway, to more weighty matters, manly
    matters indeed: Bootcamp!

    Sounds not very practical according to your info. //s sounds a
    good way to go. I do get almost the same functionality by a
    Winbox next to my Mac tower and both Mac and Winbox connected to
    different ports on the 20", thus a simple button press to go to
    the VGA gets me the Windows box on screen (the Mac, on that
    particular screen is connected to the dvi port of the screen).

    True, I have to fish the mouse and keyboard for the Winbox out
    from the back of the monitor where they are kept. Silly me has
    been cursing Windows and Bill Gates quite unfairly at times
    because nothing appeared on the screen from key presses... it
    helps to be using the right keyboard! (yes, I know about KVM
    switches and stuff... I'm too lazy to set this up.)

    --
    dorayme
    dorayme, Oct 29, 2006
    #16
  17. dorayme

    Nico Schuyt Guest

    Dylan Parry wrote:
    > dorayme wrote:


    >> Anyone got any favourites re the best and simplest (or are these
    >> too incompatible?) css strategies for rounded corners to boxes?
    >> Lets say for plain colour backgrounds for both box and surrounds.


    > If I ever need curvy corners I use the technique described at
    > http://www.html.it/articoli/niftycube/index.html - it's implemented
    > entirely through Javascript as a bells-and-whistles solution.


    Great link! Thanks

    --
    Nico Schuyt
    http://www.nicoschuyt.nl/
    Nico Schuyt, Oct 29, 2006
    #17
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Konrad

    rounded corners in data grid

    Konrad, Aug 30, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    808
    Ken Schaefer
    Aug 30, 2003
  2. Francisco J. Jurado

    Rounded corners in menu Table and Bottons

    Francisco J. Jurado, May 31, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    592
    John Timney \(Microsoft MVP\)
    May 31, 2004
  3. kurt sune

    Rounded corners on panel/div etc

    kurt sune, Oct 12, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    5,981
  4. Mark Rae

    Rounded corners

    Mark Rae, Jan 20, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    2,595
    mkrawats
    Sep 24, 2009
  5. Alan
    Replies:
    4
    Views:
    504
    Whitecrest
    Nov 10, 2003
Loading...

Share This Page