Clever Geek Handbook

How to create rounded corners using css or javascript

Duplicate:

What is the best way to create rounded corners using CSS?

I want to create a table with some columns where each column has a rounded corner.

I'm not a css expert. I think the js solution should be fine.

If anyone has done this .. I would really appreciate if they can help.

I am not using JQuery.

thanks ben

0


source to share


6 answers


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:

http://www.html.it/articoli/nifty/index.html

+5


source


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.

+1


source


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.

+1


source


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.

+1


source


Most of the time I see it has to do with using clever image manipulation with css. Tables and other similar widgets are browser-defined, so you can't just use them and ensure that everyone sees the same thing.

http://designworkx.co.nz/

You have a simple page shortly, this is a good simple example.

0


source


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

0


source






More articles:


All Articles