Round corners with CSS

Using IMG tag:

Final look:

this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text

Corners exposed:

this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text

##--------- CODE --------------

HTML:

<div id=box1>

<img class="itl" src="tl.gif" />
<img class="itr" src="tr.gif" />
<img class="ibl" src="bl.gif" />
<img class="ibr" src="br.gif" />

<div id=content>
this is my text this is my text this is my text
this is my text this is my text this is my text
this is my text this is my text this is my text
</div>
</div>

CSS:

#box1{
position:relative;
background-color:#DDDDDD;
width:250px;
margin:20px;
}

#content{padding:10px;}

.itl{position:absolute;top:0px;left:0px;}
.itr{position:absolute;top:0px;right:0;}
.ibl{position:absolute;bottom:0;left:0px;}
.ibr{position:absolute;bottom:0;right:0;}

Comments:

Because CSS style for corners is a CLASS, it can be reused.

Here is a box with different colors using the same positioning class:

this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text this is my text

Using DIV tag with background:

Final look:

Corners exposed:

##----------- CODE -------------------

HTML:

<div id=box2>

<div class=c1tl ></div>
<div class=c1tr ></div>
<div class=c1bl ></div>
<div class=c1br ></div>

<div id=content>
this is my text this is my text this is my text
this is my text this is my text this is my text
this is my text this is my text this is my text
</div>
</div>

CSS:

#box2{
position:relative;
background-color:#DDDDDD;
width:250px;
margin:20px;
}

#content{padding:10px;}

.c1tl{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
background: url(tl.gif) no-repeat;
}

.c1tr{
position:absolute;top:0px;right:0px;
width:10px;height:10px;
background: url(tr.gif) no-repeat;
}

.c1bl{
position:absolute;bottom:0px;left:0px;
width:10px;height:10px;
background: url(bl.gif) 0 100% no-repeat;
}

.c1br{
position:absolute;bottom:0px;right:0px;
width:10px;height:10px;
background: url(br.gif) 100% 100% no-repeat;
}

Using DIV tag with background + Image Offset:
( using 1 image for all corners )

Image used:

Final look:

Corners exposed:

##----------- CODE -------------------

HTML:

<div id=box2>

<div class=c2tl ></div>
<div class=c2tr ></div>
<div class=c2bl ></div>
<div class=c2br ></div>

<div id=content>
this is my text this is my text this is my text
this is my text this is my text this is my text
this is my text this is my text this is my text
</div>
</div>

CSS:

#box2{
position:relative;
background-color:#DDDDDD;
width:250px;
margin:20px;
}

#content{padding:10px;}

.c1tl{
position:absolute;top:0px;left:0px;
width:10px;height:10px;
background: url(orange.jpg) no-repeat;
}

.c1tr{
position:absolute;top:0px;right:0px;
width:10px;height:10px;
background: url(orange.jpg) 100% 0 no-repeat;
}

.c1bl{
position:absolute;bottom:0px;left:0px;
width:10px;height:10px;
background: url(orange.jpg) 0 100% no-repeat;
}

.c1br{
position:absolute;bottom:0px;right:0px;
width:10px;height:10px;
background: url(orange.jpg) 100% 100% no-repeat;
}

Transparency & Shadow

This is pretty simple if you have cat set constant WIDTH or HEIGHT of the BOX.

A. WIDTH is set to 300px, HEIGHT is flexible

you need 3 images:

text text text text text text text text text text text text text text text text text text text text text text text text text

##----------- CODE -------------------

## example is using IMAGE for Top and DIV background for Bottom

## you can use either method

HTML:

<div id="box6">

<img src="../images/O2top.gif" width="300" height="14" /><div id="content6">
text text text text text text text text text
text text text text text
text text text text text text
text text text text text</div>
<div id="O2bottom"></div>

CSS:

<style>
#box6{
position:relative;
width:300px;
margin:20px;
background-color:#66CCFF;
}

#O2top{
position:relative;
background: url(top.gif) no-repeat;
height:14px;
}

#content6{
position:relative;
padding:0px 10px 0px 10px;
background: url(back.gif) repeat-y;
}

#O2bottom{
position:relative;
background: url(bottom.gif) no-repeat;
height:14px;
}
</style>