Rounded Corners - Best Way?

by Andyf
3 replies
  • |
Does anyone know the best way to make rounded corners for CSS DIV boxes?

I have downloaded a few Javascript apps and they almost worked fine, but each one so far had a little "quirk" or two that made the corners not look so great.

I've seen a number of ways to do this....some are real long and a little complicated. Some are actually pretty easy to use. But so far, I haven't found one that works real well.

Maybe there is a software package out there for website graphics that also contains solutions for rounded corners....I don't know.

Any thoughts?


#corners #rounded
  • Profile picture of the author Kezz
    Do you need it to have adjustable width or just adjustable height?

    Adjustable height alone is easy. Just create a top div, with the top part of a rounded rectangle as the background div with no repeat. Right under that, put a content holding div with a vertically tiling backround image and expandable height. At the bottom, put a div holding the bottom of your rounded rectangle.

    If you need adjustable width too, that's different. A similar method still though.
    {{ DiscussionBoard.errors[972892].message }}
  • Profile picture of the author Andyf

    Thanks for the reply. I'm looking for some type of javascript that does this. There are a number of them out there I think. I just have to find the right one. I tried one that nearly worked.

    I might post this question on another higher traffic Warrior Forum.

    {{ DiscussionBoard.errors[973870].message }}
  • Profile picture of the author lharding
    Easiest way is to use the CSS extensions that most browsers have;

    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;

    Those three starting with - are implemented by different browsers (as CSS was not finalised), but the official is the last one. Most browsers will support, expect IE (of course).

    Anyhow, more details regarding this CSS can be found at:

    The Art of Web ~ CSS: border-radius and -moz-border-radius

    Cheers, Lee.
    Lee Harding
    The Architect
    {{ DiscussionBoard.errors[974716].message }}

Trending Topics