JB Visions of Thatcham Berkshire

JBVisions of Thatcham Berkshire

Creative web design

Rounded corner boxes with css

There are many ways of creating round corner boxes on your site. The holy grail of these is to be able to accomplish the entire thing without the use of images and indeed a number of sites offer wizards to generate them.

To date I, and several other webmasters who have joined in the hunt with me, have failed to find one that works in all browsers and copes with text re-size without breaking.

If however you're willing to use 4 small images then the task is easily accomplished, in fact, I use it on this site.


And just to prove it works.........
here's one I made earlier



These are the 4 images you'll need tl gif tr gif bl gif br gif right click on them to save them or, if you have a graphics package create your own. These are 14 pixels square.

Here's the code

If you copy and paste this make sure you paste it as plain text or you will get all the formatting.

CSS


.cbl {
background: #f90 url('bl.gif') no-repeat 0 100%;
top: 0px
}
.cbr {
background: url('br.gif') no-repeat 100% 100%;
}
.ctl {
background: url('tl.gif') no-repeat 0 0;
}
.ctr {
background: url('tr.gif') no-repeat 100% 0;
padding: 0px;
top: 0px
}
.innerbox {margin:20px;color:#282828;}

 

HTML


<!-- Start rounded box -->
<div class="cbl">
<div class="cbr">
<div class="ctl">
<div class="ctr">
<div class="innerbox">

The contents of the box go here

<br /><br />
</div>
<!-- End innerbox -->
</div></div></div></div>
<!-- End rounded box -->




We do much more than just build web sites,
we build customer satisfaction!