CSS Rounded Corners

How Create CSS Rounded Corners

Cascading Style Sheets are a necessity for building well formatted web sites. As you can add graphical elements to your page that you couldn't do before with CSS. Consistent formatting across a site shows a level of professionalism that visitors appreciate. The following code shows how to create a box, with rounded corners. This code for CSS Rounded Corners will work on all the major browsers

CSS and HTML Code for Rounded Corners


CSS
/* set millions of background images */
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }

/* height and width stuff, width not really necessary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }



HTML

<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent">
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Duis
ornare ultricies libero. Donec
fringilla, eros at dapibus fermentum,
tellus tellus auctor erat, vitae porta
magna libero sed libero. Mauris sed leo.
Aliquam aliquam. Maecenas vestibulum.</p>
</div><!-- /rbcontent -->
<div class="rbbot"><div></div></div>
</div><!-- /rbroundbox -->


Related Topic How to Create CSS Rounded Image Corners
Latest Android Interview Questions and Answers
Best Apple iPhone iTune Action Games List

nScraps.com 2011   Privacy Policy  Terms of Service  Feedback