To make a html element - div, image, table etc. have rounded borders (in all recent browsers like Internet Exmplorer, FireFox, Chrome, Safari etc.),
 you may use the following CSS class:

.rounded-borders
{
	behavior: url('border-radius.htc');
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
}

which you may add to any element you prefer like

<div class="rounded-borders">
...
</div>

or 

<img src="some-image.jpg" class="rounded-borders">

Currently in this example the border radius is set to 4 pixels, but you can change this value with a different one you may prefer.

Please note also that in order to make this example to work for Internet Explorer 6+ you need to download also the border-radius.htc file,
 which you may find as attachment or you can download it from internet.

Attachments:
border-radius.zip

Category:

CSS

 
<< Go back