Thread: CSS Rounded Borders

As with many CSS properties relating to margins, padding and borders, there are four individual properties - one for each corner of a box element - and one shorthand property. Each of the corner attributes will accept either one or two values. The border-radius property will accept up to two values in WebKit browsers and up to eight now in Firefox 3.5.


The following examples will only work if you're using Firefox or another Mozilla browser that supports -moz-border-radius properties.


The latest versions of Safari now support -webkit-border-radius. Previously only the 'nightly builds' contained this functionality.

(You can download nightly builds of WebKit from http://nightly.webkit.org/ (Mac or Windows) which will give you an application called WebKit - essentially the latest development version of Safari's rendering engine).

WebKit has supported elliptical rounded corners from the start:


As mentioned above, WebKit (Safari, iPhone) now supports a number of other CSS3 features, including the following effects and transforms.

Ya, It's helpfull