How to round image corner inside div

Question

I need image with rounded bottom corners inside rounded div.

I tried to set image border radius, but div exceeds image. Where do I make a mistake?

Is there a way how to fix it? Or do we have better solution? Thank you for all answers

Here is my code

.mainTile{
    position: absolute;
    background-color: red;
    border-radius: 15px;
}

.mainTileHeader
{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

.mainTileHeader h2
{
    text-align: center;
    margin-top: 10px;
    color: white;
    margin-bottom: 10px;
}

.mainTileImg
{
    width: 100%;    
    -webkit-border-radius: 0 0 15px 15px;
}

.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    border-radius: 20px;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="widht=device-width">
    <title>Main</title>
</head>
<body>
    <div class="mainTile" style="width: 300px;">
        <div class="mainTileHeader">
            <h2>Header</h2>
        </div>
        <img src="https://picsum.photos/300/?random" alt="item" class="mainTileImg">
        <button class="button">xxxxx</button>
    </div>
</body>
</html>

Is there anything from stopping you using the outer div as a clip/mask container and just ignoring all rounding efforts of the image itself? https://css-tricks.com/clipping-masking-css/ — James LeClair, Jun 07 '18 at 14:51

score 5 · Answer 1 · answered Jun 07 '18 at 14:51

Add vertical-align:top; to your image class. The default vertical alignment is baseline which is what causes the gap.

.mainTile {
  position: absolute;
  background-color: red;
  border-radius: 15px;
}

.mainTileHeader {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.mainTileHeader h2 {
  text-align: center;
  margin-top: 10px;
  color: white;
  margin-bottom: 10px;
}

.mainTileImg {
  width: 100%;
  -webkit-border-radius: 0 0 15px 15px;
  vertical-align:top;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 20px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

<div class="mainTile" style="width: 300px;">
  <div class="mainTileHeader">
    <h2>Header</h2>
  </div>
  <img src="https://picsum.photos/300/?random" alt="item" class="mainTileImg">
  <button class="button">xxxxx</button>
</div>

score 0 · Answer 2 · answered Jun 07 '18 at 15:28

That space there is caused because the img is an inline element and like all inline element they have to care about descenders which are those letter that goes under the base like like g and p.

one solution of many would be to set font-size 0 on the container that hold the img yes this will make the text disappear in the children, so you just set it back on the those children.

.mainTile {
  position: absolute;
  background-color: red;
  border-radius: 15px;
  font-size: 0;
  /* Added */
}

.mainTileHeader {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  /* Added */
}

.mainTileHeader h2 {
  text-align: center;
  margin-top: 10px;
  color: white;
  margin-bottom: 10px;
}

.mainTileImg {
  width: 100%;
  -webkit-border-radius: 0 0 15px 15px;
}

.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  border-radius: 20px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

<div class="mainTile" style="width: 300px;">
  <div class="mainTileHeader">
    <h2>Header</h2>
  </div>
  <img src="https://picsum.photos/300/?random" alt="item" class="mainTileImg">
  <button class="button">xxxxx</button>
</div>

How to round image corner inside div

2 Answers2