CSS: Round Corners
Tutorial by Stefan Trost | 2012-05-10 at 23:43
In modern browsers, it is easy to realize round corners for boxes or other elements without having to create complicated images for achieving this. Exemplary, we define two classes for corners with a radius of 3 pixels and 6 pixels:
.br3 { /* 3 pixel radius */ -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; } .br6 { /* 6 pixel radius */ -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px; }
The nice thing about this solution is that we now can assign the classes "br3" and "br6" to all elements that should have appropriate corners without having to write CSS rules for each element separately.
The following example shows a DIV-container with 6 pixels radius corners and an INPUT field with a corner radius of 3 pixels:
<div class="br6" id="box"> <input name="inputfield" class="br3" value=""> </div>
Regarding compatibility: Modern browsers that support CSS3 already understand "border-radius" and thus can implement the corners. For older versions of Firefox, the rule with the -moz prefix is crucial, for Google Chrome and Safari, the property with the -webkit prefix. Older browsers not understanding anything of this, will display square corners instead of the rounded corners.
About the Author
You can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile
Related Topics
CSS: Include CSS Stylesheets in HTML
Tutorial | 0 Comments
HTML: Difference between ID and CLASS
Info | 0 Comments
Website Performance: Deliver JavaScript and CSS files compressed to reduce loading times
Tutorial | 0 Comments
Reload Images, CSS, JS and Web Pages despite Browser Cache
Tip | 2 Comments
CSS Hacks for the Internet Explorer
Tip | 1 Comment
jQuery: Count Elements, Images, Classes etc
Tip | 0 Comments
Darken Background of a Website (Gray Out Effect)
Tutorial | 0 Comments
Important Note
Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.