CSS Rounded Corners

Discussion in 'Web Design and Development (archive)' started by mms, Mar 5, 2004.

  1. mms
    macrumors 6502a

    Joined:
    Oct 8, 2003
    Location:
    CA
    #1
    What's the best (as in simple yet compatible in all browsers) way of making rounded corners? The one way I have heard of doing it is with background images. Is there an easier way of doing this?
     
  2. macrumors 68040

    Grimace

    Joined:
    Feb 17, 2003
    Location:
    with Hamburglar.
    #2
    Nope, that is not the most efficient way. There is a line of CSS code that will do it. I know that Dreamweaver 2004 highlights that feature. I'll see if I can locate it.
     
  3. macrumors 603

    janey

    Joined:
    Dec 20, 2002
    Location:
    sunny los angeles
  4. mms
    thread starter macrumors 6502a

    Joined:
    Oct 8, 2003
    Location:
    CA
    #4
    Yes, something like that. I know border-radius in CSS3 would do it, but that wouldn't be compatible. Since this is going to be a school website, it must be accesible and compatible with any browser on any platform. Would that be the best way to do it, then?
     
  5. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
  6. macrumors 601

    Westside guy

    Joined:
    Oct 15, 2003
    Location:
    The soggy part of the Pacific NW
    #6
    Make it as a GIF with transparency - most every browser should support that. GIFs allow you to set one "color" as completely transparent - in Photoshop you do this with the "GIF89 export" functionality.

    PNGs are nicer and have 256 levels of transparency available, as well as no patent encumberances (unlike GIFs); but they won't work right in Netscape 4.x or (more importantly) any version of Internet Explorer on Windows.
     
  7. macrumors newbie

    Joined:
    Jul 29, 2004
    #7
    Actually, you DON'T need images!

    Check out http://www.pranadigital.com for an example of rounded corners and borders created without images. This technique saves bandwidth and looks very nice. Has anyone seen this done before? I may be the first.
     
  8. macrumors 68030

    themadchemist

    Joined:
    Jan 31, 2003
    Location:
    Chi Town
    #8
    ooh, that's nice. all coded, too? wow, I can't wait til I have time to really dive into CSS, beyond the little experience I do have with it.
     
  9. macrumors regular

    Joined:
    Oct 26, 2003
    Location:
    Southern NJ
    #9
    Mozilla has a browser-specific property that will take care of it, but I'm not sure the other browsers are going to support it anytime soon. As far as border-radius from CSS3 is concerned, which browsers support it? I'd have to check it against a Gecko flavor and Safari.

    The Sliding Doors technique is probably the easiest non-script solution I've used, and it works quite well. Cut your background images right, and it's extremely low-bandwidth.
     
  10. macrumors 68000

    kgarner

    Joined:
    Jan 28, 2004
    Location:
    Utah
    #10
    I like the mountaintop method myself. I like how you can make two-toned boxes if you like that expand to fit any text.
     

Share This Page