PhpMyBorder - add round corners by CSS

Home Demo Tutorial Template Download
Sitemap Partners
About

Googlefun
Heh, do you notice any funny misplaced ads on my page?

Heh, last week it had alot of farmer products!

ROUND CORNERS

- a winning concept of free, professional and modern webdesign!

Round corners using table,images and css

This tutorial will start by demonstrating how to make rounded corners the classic way. With a HTML table and four images it’s quite easy to make a round border effect. You may draw your own corners in Photoshop, but in this tutorial we will use these four images.

gif

gif

gif

gif

And here is the HTML code that puts it together to a rounded border:

Add these lines in your stylesheet:

( change the bolded attributes to customize )

.c1,.c2,.c3,.c4{height: 21px; width:21px;} 

.c1{background: url(images/1.gif);} 

.c2{background: url(images/2.gif);} 

.c3{background: url(images/3.gif);} 

.c4{background: url(images/4.gif);} 

.t1{background: #FF0000;}

And the HTML code:

<table 

   class="t1" 

   cellpadding="0" 

   cellspacing="0" 

   border="0" 

> 

 <tr> 

  <td class="c1"></td> 

  <td></td> 

  <td class="c2"></td> 

 </tr> 

 <tr> 

  <td></td> 

  <td> 

   Round corners using table and images

  </td> 

  <td></td> 

 </tr> 

 <tr> 

  <td class="c3"></td> 

  <td></td> 

  <td class="c4"></td> 

 </tr> 

</table>

It will display like this :


	Round corners using table and images

<- Privious Next ->

Last update 23. nov. 2005