License Public Domain
Lines 17
Keywords
CSS (2) rounded corners (1)
Permissions
Owner: Stou S.
Viewable by Everyone
Editable by All Siafoo Users
Hide
Bored? Check out the Recent Activity on Siafoo Join Siafoo Now or Learn More

CSS3 Rounded corners Atom Feed 0

In Brief The three ways to set the CSS3-like border-radius property using the browser-specific extensions in Konquerer, Firefox, Safari, Chrome, and indeed any recent browser based on KHTML, Gecko, or WebKit.... more
# 's
 1-khtml-border-radius: 1em;
2-moz-border-radius: 1em;
3-webkit-border-radius: 1em;
4
5/* Or to set the corners to have different roundedness */
6
7-khtml-border-radius-topleft: 1em;
8-khtml-border-radius-topright: 0em;
9-khtml-border-radius-bottomleft: 1em;
10-khtml-border-radius-bottomright: 0em;
11
12-moz-border-radius-topleft: 1em;
13-moz-border-radius-topright: 0em;
14-moz-border-radius-bottomleft: 1em;
15-moz-border-radius-bottomright: 0em;
16
17/* Note that the webkit ones have a completely different syntax */
18-webkit-border-top-left-radius: 1em;
19-webkit-border-top-right-radius: 0em;
20-webkit-border-bottom-left-radius: 1em;
21-webkit-border-bottom-right-radius: 0em;

The three ways to set the CSS3-like border-radius property using the browser-specific extensions in Konquerer, Firefox, Safari, Chrome, and indeed any recent browser based on KHTML, Gecko, or WebKit.

Check out this blog post and the CSS3 Info Site for a more detailed description of the border-radius property.

Note

The corners are somewhat aliased on older WebKit based browsers (it seems to be fixed on Safari 4, at the least) and on Firefox before 3.0ish

If you are using one of the above mentioned browsers the note box above will have rounded corners created using these CSS properties.

Comments

over 6 years ago (10 Feb 2010 at 06:23 PM) by Stou S.
I am so glad this snippet is syntax highlighted...
over 6 years ago (10 Feb 2010 at 07:02 PM) by David Isaacson
haha better than it all being black i guess. wtf shouldn't the syntax highlighter actually do something interesting here?