Kathirvel K

Rounded corners using css

Posted on: December 15, 2009


This tutorial explains how to design a liquid layer with rounded corners, using CSS and few line of code in HTML.
A simple solution is to define four layers, each ones with the CSS attribute background which contains a rounded corner image:


The result is something like this:

Step 1: CSS code
Copy and paste this code in your CSS file:

div.w1{background:#DFDFDF url(pic/w_left_top.gif) no-repeat;width:100%;}
div.w2{background:url(pic/w_right_top.gif) no-repeat top right;}
div.w3{background:url(pic/w_left_bottom.gif) no-repeat left bottom;}
div.w4{background:url(pic/w_right_bottom.gif) no-repeat right bottom;padding:10px;}
How you can see, layer w1 is the main container container with the rounded left-top border in the attribute background.
Layer w2 is contained into layer w1 and it have in the background attribute the rounded right-top border. So, for all others.
Layer w4 will contain your text or other html elements. I added a padding attribute to add 10px space from external borders.

Step 2: HTML code
Now, copy and paste this HTML code into your page:

<div>
<div class=”w2″>
<div class=”w3″>
<div class=”w4″>
Welcome on my site
</div>
</div>
</div>
</div>

So, add all HMLT elements you want inside w4 layer and your liquid layer with rounded corners is ready to use!

(Source: http://woork.blogspot.com/2007/12/liquid-layer-with-rounded-corners-using.html )

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: