Hi there, today i found a very good tutorials for css rounded corners.  Please flow the tutorials and find out the result. Have fun....

This is the HTML Part:

<div id="demo">


<!-- most basic example -->
<div>
<div>
<div></div>
<!-- Your content goes here -->
<h1>Even <em>More</em> Rounded Corners With CSS</h1>
<p>Here is a very simple example dialog.</p>
<p>Note that if gradients are used, you will need a "min-height" (or fixed height) rule on the body of the dialog. If these examples appear funny at the bottom, it is because they do not enforce the min-height rule.</p>
</div>
<div><div></div></div>
</div>

<!-- more involved example -->

<div>
<div>
<div>
<div></div>
<!-- Optional: Standard Module Format (hd/bd/ft) for providing semantic, meaningful content. Not required for visual effect. -->
<div>
<h1>Even <em>More</em> Rounded Corners With CSS</h1>
</div>
<div>
<p>This more-complex example uses Standard Module Container format and a vertical scroll container which can prevent overflow past the dialog limit.</p>
</div>
<div>
<p>This is where the footer content goes. For other variants (colours and drip styles etc.,) refer to the main page.</p>
</div>
</div>
</div>
<div><div></div></div>
</div>

<!-- /demo -->
</div>

 

This is the CSS Part:

body {font:76% normal verdana,tahoma,arial,"sans serif";}
h1 {font:2.5em georgia,"times new roman",helvetica,verdana,"sans serif";}
p {line-height:1.6em;}

/*
-- Even more rounded corners with CSS: Base stylesheet --
*/

.dialog {
position:relative;
margin:0px auto;
min-width:8em;
max-width:760px; /* based on image dimensions - not quite consistent with drip styles yet */
color:#fff;
z-index:1;
margin-left:12px; /* default, width of left corner */
margin-bottom:0.5em; /* spacing under dialog */
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(dialog2-blue-800x1600.png) no-repeat top right;
_background-image:url(dialog2-blue.gif);
}

.dialog .content {
position:relative;
zoom:1;
_overflow-y:hidden;
padding:0px 12px 0px 0px;
}

.dialog .t {
/* top+left vertical slice */
position:absolute;
left:0px;
top:0px;
width:12px; /* top slice width */
margin-left:-12px;
height:100%;
_height:1600px; /* arbitrary long height, IE 6 */
background-position:top left;
}

.dialog .b {
/* bottom */
position:relative;
width:100%;
}

.dialog .b,
.dialog .b div {
height:30px; /* height of bottom cap/shade */
font-size:1px;
}

.dialog .b {
background-position:bottom right;
}

.dialog .b div {
position:relative;
width:12px; /* bottom corner width */
margin-left:-12px;
background-position:bottom left;
}

.dialog .hd,
.dialog .bd,
.dialog .ft {
position:relative;
}

.dialog .wrapper {
/* extra content protector - preventing vertical overflow (past background) */
position:static;
max-height:1000px;
overflow:auto; /* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}

.dialog h1,
.dialog p {
margin:0px; /* margins will blow out backgrounds, leaving whitespace. */
padding:0.5em 0px 0.5em 0px;
}

.dialog h1 {
padding-bottom:0px;
}

{fcomment}

About Author
Riaz Uddin Masum
Web Master
Hi, I am Riaz Uddin Masum, This is my play ground for web and IT. I like to read and write about any IT related Topic. I love to Design and Develop web site. it is my job too. My objective is to establish my career in web.
Other articles

DMC Firewall is a Joomla Security extension!