How to make rounded corners or borders using CSS (without images)
8/28/10
Borders and corners play a vital role in look and feel of websites. Since normal borders and corners give a good look but rounded borders and corners give a very nice and a different look indeed. There are many ways to make corners rounded using CSS but today what i m gona tell u is;
How to make rounded corners or borders using CSS (without images):
Following is the code that makes four different kind of boxes with different corner styles. I am just providing here CSS code but it is on you that how to use it either using external css or embedded.
CSS style for rounded cornered boxes:
.box1{
border-radius: 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box2{
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box3{
border-top-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box4{
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
border-radius: 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box2{
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box3{
border-top-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
.box4{
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
Download complete html File here
Note:
This css will only work in IE9, Safari, Opera, Chrome. For Mozilla Firefox you have to place prefix -moz- before every radius property.
For example;
.box
{
-moz-border-radius: 10px;
border: 1px solid blue;
background-color: #ccddee;
padding: 5 5 5 5;
margin: 5 5 5 5;
width: 300px;
}
You are welcome to share your ideas...!



