Stay up to date – embedded code automagically updates, each snippet and article has a feed
Join Siafoo Now
or
Learn More
CSS3 Rounded corners
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 |
| Language | CSS |
# '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