CSS Rounded Box. How do I create a box with rounded corners in CSS.. CSS guides, tutorials and help

Date Posted: Thursday 24th of November 2011 | Category: CSS

CSS Rounded Box. How do I create a box with rounded corners in CSS.
I have been creating websites for years. Whenever I created a box with rounded corners I generally created a top and bottom in photoshop, at a fixed size to match the size of the table.

I know this is the hard way of doing things, but this has always been my trusted way.

The code below creates a box with rounded corners. You will need to create a rounded rectangle in photoshop and then crop one of the corners.

Make sure it is 15px by 15px and save each one by rotating it 90% to give you your four corners.

Save the gifs as tr.gif, br.gif, tl.gif, bl.gif
As the name suggest above this is top right, botton right, top left and bottom left.

Create your gifs and then copy and paste the code below in your html document.

The great thing about this script is the rounded box works for any size. Just set the .roundcont code to whatever you like.

<style>
.font1 {
font-family:arial;
font-size:12px;
}

.font2 {
font-family:arial;
font-size:22px;
font-weight:bold;
}

.roundcont {
width: 500px;
background-color: #FF9900;
color: #ffffff;
}

.roundtop {
background: url(tr.gif) no-repeat top right;
}

.roundbottom {
background: url(br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
</style>

<body>

<div class="roundcont">
<div class="roundtop">
<img src="tl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>


<table width="100%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td align="center"><span class=font2>CSS Box with Rounded Corners</span><br /><span class=font1>This is an example of how to create a box with rounded corners using CSS.<br />This works in FF, IE, Chrome and Safari.<br /><br /></span></td>
</tr>
</table>


<div class="roundbottom">
<img src="bl.gif" alt=""
width="15" height="15" class="corner"
style="display: none" />
</div>
</div>

</body>

Related Links:
- CSS Box with rounded corners