How to make rounded borders using CSS (without images)

Share Button
How to make rounded corners or borders using css

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 gonna 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 styles 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; }

 

 

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…!

Share Button