Liquid layer with rounded corners using css

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:


Download this tutorial


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 class="w1">
<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!