home

CSS3 Borders

Css3 can create rounded corners borders and create boxes with shadows also image as a border without any designing and CorelDraw tool or any other program, this really simple and useful option in css latest version, it makes looks professional, attractive and easy to do.

CSS3 Rounded Corners

Adding borders in css old version it's quite tricky, why because will have to use a different image for each corner and that should be matched with other corners, for all this css3 is the answer.

CSS3 Rounded Border Corners Demo

Here is the css3 rounded corners border demo, how it's displaying in corners with the border-radius option.

Border -radius Demo
.border-radius {
    border: 20px solid #ff0000;
    padding: 10px 40px; 
    width: 100px;
    height: 100px;
    border-radius: 10px 15px 20px 25px;
}

CSS3 Rounded Border Corners code

Here is the css3 rounded corners border code with border-radius property with some value, it makes the border corners rounded. Written code for different corners like top-right-bottom-left. Also we have a property called border this is for width(border: 2px solid #ff0000;).

// HTML code for border//
<div class=">border-border">Border -radius Demo </div>
<style>
/* css styles for border radius*/
.border-border {
    border: 20px solid #ff0000;
    padding: 10px 40px; 
    width: 100px;
    height: 100px;
    border-radius: 10px 15px 20px 25px;
}</style>

Browser Compatibility(Support)

Browser Name Version Supporting tag
IE 9.0  
Mozilla Firefox 4.0- 3.0 -moz-
Google Chrome 5.0- 4.0 -webkit-
Safari(apple) 5.0- 3.1 -webkit-
Opera 10.5  

Css3 Borders Advantages :-

Reduce page loading time
Make attractive
Reduce usage of tools
Easy to write create any type of borders