Posts
In this article I show you how to create Rounded boxes using only pure CSS! It is tested on the following browsers successfully:
- Internet Explorer 6, 7 and 8
- Mozilla Firefox 2 and 3
- Opera 9
The final result would be like this:
The principle behind this type of Rounded corner technique is to use gradually expanding tag’s border as:
______________________________________
_________________________________________
__________________________________________
Let’s get started:
- First of all we will need to create our .css file, wherein we will do all the stylings. Create a style_round.css file and open it in Notepad or any of your text editor.
- Now add the following lines in the CSS file.
.b1h, .b2h, .b3h, .b4h, .b2bh, .b3bh, .b4bh
{font-size:1px; overflow:hidden; display:block}
.b1h{height:1px; background:#aaa; margin:0 5px}
.b2h, .b2bh{height:1px; background:#aaa; border-right:2px solid #aaa; border-left:2px solid #aaa; margin:0 3px}
.b3h, .b3bh{height:1px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 2px}
.b4h, .b4bh{height:2px; background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa; margin:0 1px}
.b2bh, .b3bh, .b4bh{background:#ddd}
.headh{background:#aaa; border-right:1px solid #aaa; border-left:1px solid #aaa}
.headh h3{margin:0px 10px 0px 10px; padding-bottom:3px}
.contentf{background: #ddd; border-right:1px solid #aaa; border-left:1px solid #aaa}
.contentf div{margin-left:12px; padding-top:5px}
You could change the border and background colors to your choice.
- Now create a .html file and place the following code in it:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style_round.css" />
<title>Flexible Rounded boxes</title>
</head>
<body>
<b class="b1h"></b><b class="b2h"></b><b class="b3h"></b><b class="b4h"></b>
<div class="headh">
<h3>Here is the Heading</h3>
</div>
<div class="contentf">
<div>Without any image</div>
</div>
<b class="b4bh"></b><b class="b3bh"></b><b class="b2bh"></b><b class="b1h"></b>
</body>
</html>
