How to make CSS3 Rounded Corners using border-radius without images

Heading Tags Info

 

In the past the only way you could add a text box with rounded corners was to use background images. It was time consuming first to create an mage and then cut it into the different corners, then you had to build the different bits of code and finally upload everything to your server.

Now there is a very easy way to create the rounded corners by using CSS3 with the border-radius properties, also it is just as easy to add a shadow box.
Some of the advantages of using CSS3 are:-

  • Page loads quicker because no images have to be downloaded
  • Saves on Bandwidth
  • Rounded corner box does not need to have fixed width and height

This is a Green box with a 1 pixel wide border and a dark grey shadow, the radius of the corners are set to a value of 15px, although a percentage value could be used.


Below is the code required to create the above box, I have also added the values for <ul> and hyperlinks.


<style type="text/css">
.green-box {
background-color: #008040;
color: #CCC;
padding: 10px 18px 12px 18px;
font-size: 14px;
border: 1px solid #ffffff;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius:15px;
-moz-box-shadow: 5px 5px 15px #000;
-webkit-box-shadow: 5px 5px 15px #000;
box-shadow: 5px 5px 20px #000;
margin: 10px 0 20px;
}
.green-box ul{
font-size: 14px;
margin-left: 10px;
list-style-image: url(images/smfolder1.gif);
list-style-position: outside;
}
.green-box h2 {
font-size: 16px;
color: #FFFFFF;
font-weight: normal;
margin: 16px 0 0 0;
}
.green-box a:link {
font-size: 14px;
color: #FFFFFF;
text-decoration: underline;
}
.green-box a:visited {
font-size: 1em;
color: #F1F89C;
text-decoration: underline;
}
.green-box a:link:hover {
font-size: 14px;
color: #FFFF66;
text-decoration: none;
}
</style>

 


A Few Notes

border-radius: this defines the shape of the rounded corners.
-moz-border-radius: defines the shap of the corners in older versions of Firefox.
-webkit-border-radius: defines the corners for Chrome and Safari.
box-shadow: etc are the corners for the shadow, if you do not want any shadows then just remove the entries, the same goes for the border setting.

 


You can copy the above code and either place it inside your existing css file or save it as a separate file and call it in the normal way. To place this box within your page just add the code below where you want the box.

<div class="green-box">
Enter your content within the tags.
</div>