How to Get Perfect Border Radius on Images in All Browsers

webkit-border-radius does not crop image properly

What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.

Images with rounded corners

It's using an image overlay that contains the curved borders.

<img class="rounders2_img" width="103" height="80" alt="Sample Image" src="http://pad2.whstatic.com/images/thumb/1/18/Shadow-of-a-Writing-Hand-1834.jpg/-crop-103-80-103px-Shadow-of-a-Writing-Hand-1834.jpg"/>
<img class="rounders2_sprite" src="http://pad1.whstatic.com/skins/WikiHow/images/corner_sprite.png" alt="Sample Image"/>

The same technique is used generally for drop shadows.

Sample Image

This is done because IE doesn't support many CSS 3 cool stuff, like rounded corners:

moz-border-radius: 5px; -webkit-border-radius: 5px;

How can I make rounded corners on non-CSS3 browsers?

I would not use the css workarounds/hacks others have suggested here, I would keep to using images. Yes it's more fiddly to set up but it is cross-browser and robust. I have tried a number of these css workarounds and have found them to be unpredictable at best. They might work fine on some IE installs, but not on others (e.g completely crashing the browser). And worse we were unable to isolate why it worked fine on some installs, and not on others (and this is for the same IE version).

I would either: live without curved corners on IE, or use images. You can use nested divs:

<div class="top-left">
<div class="top-right">
<div class="bottom-left">
<div class="bottom-right">

... content ...
</div>
</div>
<div>
</div>

and in css you set the appropriated background-image for each class, something like this:

div.top-left { background: url('/top-left-corner.png') left top no-repeat; }

and set the border style for one of the divs too, e.g:

border: 4px solid #f00;

Unwanted border-radius corners around images in Brave/Chrome browser

Using mask instead of overflow gives a better result (both behave the same since both hide what is outside)

.cover {
margin: 1em;
padding: 1em;
}

.image-wrapper {
height: 15em;
width: 15em;
background-color: black;
border-radius: 15px;
-webkit-mask:linear-gradient(#fff 0 0);
}

img {
height: 100%;
width: auto;
}

body {
background:pink;
}
<div class="cover">
<div class="image-wrapper">
<img src="https://images.pexels.com/photos/316466/pexels-photo-316466.jpeg" />
</div>
</div>

<div class="cover">
<div class="image-wrapper">
<img src="https://picsum.photos/id/17/200/300" />
</div>
</div>

Why won't CSS3 border radius work on images on webkit browsers (Chrome and Safari)?

A workaround is to use a div and set the background of the div to the image.

.rounded { 
width: 100px;
height: 100px;
border: 3px solid #fff;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

background: url(image.png) no-repeat;
}

CSS Border radius not trimming image on Webkit

Webkit cannot handle border-radius cropping for children and grand-children+. It's just that bad. If you want border cropping, it has to be directly on the div the image is placed on without going any deeper down the hierarchy.

Can I use border-radious on image CSS?

Yes you can. :)

You can easily give the image a border-radius of whatever number you like.

50% or more would be and round image. You can also use px.


For example:

You have an image somewhere in your html document:

<img id="image" src="Your source">

In your css file you can simply write:

#image {
border-radius: 50px; <-- example number
}


Related Topics



Leave a reply



Submit