CODEWITHSUNDEEP
htmlcss
3D_fun
3D_fun

Reputation: 603

Empty space between background-color and border-radius

I saw some white space between green background-color and border-radius (especially when I zoom-in).

Is there any fix?

https://codepen.io/anon/pen/oPjgJZ

.container{
  width: 250px;
  height: 300px;

  background-color: antiquewhite;

  border: solid 2px green;
  border-radius: 40px;
  overflow: hidden;
}

.header{
  height: 15%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class='container'>
  <div class='header'>HeaderText</div>
</div>

Upvotes: 2

Views: 2126

Answers (3)

Th&#233;ophile Desmedt
Th&#233;ophile Desmedt

Reputation: 65

Update 2023: you can now use

overflow: clip;
overflow-clip-margin: 1px;

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-clip-margin

This way the content will go a bit further and be hidden under the border of the container, instead of being clipped a bit before the border and causing the space to appear.

Upvotes: 0

Jilly Ratria
Jilly Ratria

Reputation: 11

I don't know what the reason is, but I just change background-color color-block to linear-gradientin parent's css to make sure the background's color on 15% height parent has same color with the header. So there is no any white-space anymore.

.container{
  width: 250px;
  height: 300px;
  border: solid 2px green;
  border-radius: 40px;
  overflow: hidden;
  background: linear-gradient(to bottom, green, 15%, antiquewhite 15%);
}

.header{
  height: 15%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class='container'>
  <div class='header'>HeaderText</div>
</div>

Upvotes: 1

K K
K K

Reputation: 18099

Try this:

  1. Remove overflow:hidden from .container
  2. Give border-radius:34px 34px 0 0; to .header

.container {
  width: 250px;
  height: 300px;
  background-color: antiquewhite;
  border: solid 2px green;
  border-radius: 40px;
}

.header {
  height: 15%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 34px 34px 0 0;
}
<div class='container'>
  <div class='header'>HeaderText</div>
</div>

Upvotes: 3

Related Questions