11 December 2008

Rounded Corner Box Using Div and CSS

Ever since the advent of WEB 2.0, the way web pages have been designed has changed significantly. People these days go for more of a soft look to their pages with rounded corners every where. One of the best way of designing rounded corner box is by using div and CSS combination. Here is a sample code for the same...

<style type="text/css">

.round_box {
background: url(round_tl.png) no-repeat top left;
}
.round_top {
background: url(round_tr.png) no-repeat top right;
}
.round_bottom {
background: url(round_bl.png) no-repeat bottom left;
}
.round_bottom div {
background: url(round_br.png) no-repeat bottom right;
}
.round_content {
background: url(round_r.png) top right repeat-y;
}

.round_top div,.round_top,
.round_bottom div, .round_bottom {
width: 100%;
height: 15px;
font-size: 1px;
}
.round_content, .round_bottom {
margin-top: -19px;
}
.round_content { padding: 0 15px; }

</style>

<body>

<div class="round_box">
<div class="round_top"><div></div></div>
<div class="round_content">
<p>Your Content Here</p>
</div>
<div class="round_bottom"><div></div></div>
</div>

</body>

Note: You must have the correct image for cornering your pages!

I have found a great site that auto generates the HTML Code,CSS and corner images according to your choices for Absolutely FREE!! Check it out : RoundedCornr

1 comment:

Ajit said...

I don't want to use any image. I want to rounded border with the help of css only. How to do?