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:
I don't want to use any image. I want to rounded border with the help of css only. How to do?
Post a Comment