Need Help with your Website? Email or call us on 01268 442171.

Rounded CSS Borders

Borders are simple. All you need is the CSS instruction:

border: 1px solid red;

to change the way an element, div or even the whole page looks.

Rounded borders however need a little more effort. The method detailed below works but does require a little image manipulation albeit nothing too onerous.

Disclaimer:

The solution only works on fixed width elements.
The quality of your corners depends on the quality of your images – I cannot be responsible for your lumpy corners.

Stage 1: The Border Images.

Using the graphics package of your choice, draw yourself a box:

Make sure that you use a transparent background as this will let the background colour or image of the page fill the bits outside of the rounded corners. You also need to fill the inside of the box with the colour of your choice, do not leave it transparent otherwise the page background will show through. You are also going to need the border colour again so keep it to hand.

The next job is to chop off the top and bottom of the box. The height of each should be the same as the radius of your corners:

Stage 2: Inserting the Code

In order to put the images in the right place, you need to add a DIV either side of the element you want the border around:

<div class="top"></div>
<div class="box">
<p>This is the bit in the box</p>
</div>
<div class="bottom"></div>

The CSS for this demo is:

div.top {
background: url(border-top.gif) no-repeat;
height: 30px;
}

div.box {
width: 358px;
background: red;
border-left: 3px solid #6600FF;
border-right: 3px solid #6600FF;
}

*html div.box {width: 364px;

div.bottom {
background: url(border-bottom.gif) no-repeat;
height: 30px;
}

p {
margin: 0 27px;
}

And this is the result (with a really naff background image):

This is the actual page.

A couple of things to note:

The height of the 'top' and 'bottom' divs are the same as the height of your images.
The width of the 'box' div is the same as your images. The *html hack fixes the IE box problem.
The background and borders of the 'box' div are the same as those in your images.
The paragraph margins are zero top and bottom (so there are no gaps). The left and right margins are the height of the images less the width of your border. My border is 3px so the paragraph margins are 27px.

If the CSS is turned off, the site degrades gently without any loss of accessibility.

Nice and simple methinks

And you can't get yours to work then get in contact.

Need Help with your Website? Email or call us on 01268 442171.

top