Fri, 17 May 2024


How to make a div or image with rounded borders with css in all browsers?

By: Peter, NetArt Media
Fri, 12 June 2020

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.


Category: CSS
Share this post:



See All Scripts






Subscribe for our newsletter

Receive the latest blog posts direct in your mailbox