How to create rounded corners using css or javascript
Here's a link to 25 different ways to do it with CSS:
http://www.cssjuice.com/25-rounded-corners-techniques-with-css/
Here is a link for some great angles to do it with javascript:
source to share
In safari, chrome (I think), firefox 2+ and konquerer (and maybe others), you can do this in CSS using "border-radius". Since this is not yet an official part of the specification, use a vendor specific prefix
Example
#round-my-corners-please {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
JS solutions usually add a bunch of small divs to make them look rounded, or they use borders and negative margins to make 1px cut corners.
IMO the CSS way is better as it looks cool, is lightweight and will degrade gracefully in IE. This is of course only the case when the client does not apply them in IE.
source to share
This is what I am doing in several projects:
For Firefox and WebKit based browsers (although be careful, Chrome has bugs in this area), use CSS styles with a radius for your own rounded corners:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
They also allow you to specify values for each angle, just note that the syntax is slightly different:
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
They are based on CSS3 style border-radius
, more details on the different definitions are here: CSS: border-radius and -moz-border-radiuss (note that this article is a little outdated but still relevant). I have not researched this, but I am not aware of any browsers that implement their own CSS3 border radius (please let me know if I'm wrong).
Then, for IE, I use DD_roundies which is the most elegant JavaScript solution I have seen and uses native IE VML to draw corners.
If the user has IE without JavaScript, or is using Opera, then they won't be able to avoid rounded corners, but in the spirit of Progressive Enhancement, this should never be a problem.
source to share
If you want to stick with CSS, the best way is already indicated:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
However, you are alienating the Internet Explorer market.
To get around this, you need to create rounded images for your div. http://www.roundedcornr.com/ has an image generator and sample code.
A javascript alternative would be a jQuery plugin like DD_Roundies. Using the DD_Roundies plugin is the easiest way to do this. http://www.dillerdesign.com/experiment/DD_roundies/ You just tell the div how big you want the radius and what corners it will do all the magic (color, gradient) by itself.
source to share
HTML makeup tags, CSS and javascript are more flexible way.
This link tells arithmetic to generate css of a round corner in any radius. http://www.pagecolumn.com/webparts/rounded_corners.htm
source to share