CSS Rounded Corners, CSS

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 -->

Category

Login

CSS Rounded Corners

How Create CSS Rounded Corners

CSS and HTML Code for Rounded Corners