Home » CSS, CSS3, Design

css3 rounded corners | css border radius ie

3 December 2011 One Comment
Share on Facebook

CSS rounded corners is being used for long time, with the include of css3 border radius as native support. Now it is possible to created rounded corner css elements without using images in css3.

In this tutorial we are going to see how to create simple CSS3 rounded corners or how to control css3 border radius. Before going deep into the properties let’s check the compatibility and simple border radius.

Also try css3 border radius generator.

css3 border radius

CSS3 border radius Compatible table:

css3 border radius compatible table

[ Table via caniuse.com ]

simple css3 border radius:

Below is the simple example of using css3 border radius.

.class {
border-radius: 20px;
}

to make compatible with firefox and webkit browsers and IE (ie., ie border radius ) add -webkit prefix.

.borderStyle{
border:dashed 6px #000000;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
}

simple css3 corner radius

[ simple css3 border radius demo ]

Css3 circle using border radius:

Easily we can make circle in css without image using css3 border radius property.

.borderStyle{
border:dashed 4px #000000;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright:100px;
-moz-border-radius-bottomleft:100px;
-moz-border-radius-bottomright:100px;
-webkit-border-top-left-radius:100px;
-webkit-border-top-right-radius:100px;
-webkit-border-bottom-left-radius:100px;
-webkit-border-bottom-right-radius:100px;
border-top-left-radius:100px;
border-top-right-radius:100px;
border-bottom-left-radius:100px;
border-bottom-right-radius:100px;
}

css3 circle

[ css3 circle demo ]

css3 border radius IE Compatible:

Below code is included compatibility for IE border radius. IE9 will use the default border-radius.

.borderStyle{
border-bottom-left-radius: 152px 152px;
border-bottom-right-radius: 228px 228px;
border-bottom-style: dashed;
border-bottom-width: 42px;
border-left-style: dashed;
border-left-width: 42px;
border-right-style: dashed;
border-right-width: 42px;
border-top-left-radius: 152px 152px;
border-top-right-radius: 304px 304px;
border-top-style: dashed;
border-top-width: 42px;
padding-bottom: 12px;
padding-left: 12px;
padding-right: 12px;
padding-top: 12px;
}

Conclusion: In this article we have seen how to created rounded corner css element with css3 (border-radius) without using images.

Keywords to here:

  • css3 rounded corners
  • css border radius
  • ie border radius
  • webkit border radius
  • border radius generator

GET THE UPDATES VIA EMAIL

We don't share your email anywhere, grab our rss via feedburner


  • http://www.designscripting.com/2011/12/css3-border/ css3 border | Designscripting

    [...] we have discussed CSS3 rounder border seperately. follow the link to article css3 border radius. [...]