How is this border-radius 25px, am I doing something wrong?

HTML & CSS
1

It’s crooked / cutoff on all corners.

.jacketd {
  width: 606px;
  height: 344px;
  cursor: pointer;
  border-radius: 25px ;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

<div class="jacketd">  
  </div>

image

Maybe it’s required to be a certain height and width:

 width: 600px;
 height: 338px;

image

2

Yes, you answered your own question.

Add a border to your first example and you will see where the image comes up short.

.jacketd {
  width: 606px;
  height: 344px;
  cursor: pointer;
  border:3px solid red; /*add this to see where image is*/
  border-radius: 25px ;
  background: url("https://i.imgur.com/AJDZEOX.jpg") no-repeat 0 0;
}

EDIT:
You could also add background-size:cover; to the ruleset above to stretch that image, it doesn’t distort it since it’s a blurry image to begin with.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.