Create custom rounded corner on an image using only CSS

Question

Looking for a smart way to use CSS only to apply a left rounded corner to an image. Using the standard CSS border radius property isn't suitable as it's too round. The best I could come up with is positioning an SVG image of the round effect on top of the image - not ideal as this can sometimes "flicker in" on page load.

.banner {background:hotpink}

.img-wrap:before {
content: "";
background: url(img/rounded-corner-left.svg) no-repeat;
position: absolute;
top: 0;
width: 100%;
display: block;
background-size: contain;
height: 100%;
background-position: top left;
z-index: 2;
}

Using this border-radius setting, provided in an answer, the effect is too rounded at the top of the image.

border-radius: 20% 0 0 0 / 100% 0 0 0;

So something like border-radius: 20% 0 0 0 / 100% 0 0 0; is not acceptable? Look at clip-path and try something with that. — Sebastian Simon
– Sebastian Simon, Commented Oct 7, 2020 at 13:49
I think I jumped the gun - unfortunately, it is still too rounded at the top using border radius (I've updated the question with the border radius applied on the image). — Moozoo
– Moozoo, Commented Oct 7, 2020 at 21:52

Halil · Accepted Answer · 2020-10-07 14:02:09Z

1

The border-top-left-radius property defines the radius of the top-left corner. or change the other values like : right, left, bottom ...

Example :

border-radius: 120px 20px 120px 20px;
border-radius: 0 50% 50% 50%;
border-radius: 40px 40px 0 0; // example this one is rounded top left corner 
only

Just play with the values to try it and see yourself how it suits the best or the specifics you may have.

edited Oct 7, 2020 at 14:02

answered Oct 7, 2020 at 13:56

Halil

1218 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dharman · Accepted Answer · 2020-10-07 16:10:34Z

1

I'm not sure how round you want the left side to be so the code snippet below shows how to make the left side 100% round:

.image-with-rounded-corner-on-the-left {
  border-top-left-radius: 100%;
  border-bottom-left-radius: 100%;
}

<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" alt="enter image description here" class="image-with-rounded-corner-on-the-left">

And below is how you make it 10% round:

.image-with-rounded-corner-on-the-left {
  border-top-left-radius: 10%;
  border-bottom-left-radius: 10%;
}

<img src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80" alt="enter image description here" class="image-with-rounded-corner-on-the-left">

You can adjust how round you want to make the left border percentage wise in the lines

border-top-left-radius: [put percentage here];
border-bottom-left-radius: [put percentage here];

edited Oct 7, 2020 at 16:10

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Oct 7, 2020 at 16:04

user14394673

1 Comment

Moozoo Over a year ago

Thanks for the post! The problem with the example border radius percentage you've provided is that the radius eats into the image too much when it's a high value, or when it's a low value it's not "stretched" enough (the only way I can best explain this desired effect is by looking at the example image in my question).

Collectives™ on Stack Overflow

Create custom rounded corner on an image using only CSS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related