There are many ways to build styled boxes with nice rounded corners.
The classical method is to use background pictures in <table> or <div> but it’s also possible to create this rounded effect without any picture.
Why not using pictures?
- Background pictures are badly cached by Internet Explorer.
- Every use of picture is generating an http request that can slow down your page load.
- Every different styled box will need its own set of pictures.
- To avoid printing issues.
- Solution based on pictures are not scalable.
- The HTML code you will need to structure your styled box is heavier with pictures.
- The solution without pictures is very easy, very flexible.
The idea
<div> are used instead of pictures to create the same visual effect.
A minimum of two <div> is enough to create the effect, more <div> you will use smoother and bigger will be your round corner.
A simple solution
Don’t you like it?
Don’t you like it?
Don’t you like it?
The code
The HTML and the CSS is very simple, no need to play with positioning, width, height or font size.
Basic nested <div> and CSS border styles are enough.
HTML code
<div class=”sb”><div class=”sbhrl1″></div><div class=”sbhrl2″></div>
<div class=”sbHeader”>Round corner but no pictures</div>
<div class=”sbContent”>A simple solution and very flexible.</div>
The magic <div> are in bold 😀
CSS code
div.sb div.sbhrl1{border-top:1px solid #927C6A;margin-left:3px;margin-right:3px}
div.sb div.sbhrl2{border-top:2px solid #927C6A;margin-left:1px;margin-right:1px}
div.sb div.sbHeader{background-color:#927C6A;padding:0 7px 2px 7px;color:white}
div.sb div.sbContent {background-color:#FFFBE6;border-bottom:1px solid #E1E1E1;border-left:1px solid #E1E1E1;border-right:1px solid #E1E1E1;padding:7px}
The rounded effect is created thanks to the margins of the lines (borders) added before the header text of the styled box.
sb means styled box
hrl means header round line
Others solutions
Many solution based on a JavaScript that customize a specific div are available on internet.
The method is the same as describe here but is more advanced and of course generate smoother rounded corner.