Dan Dan - 5 months ago 9
CSS Question

Transparent border is leaving small white crescents on border radius

I am using the code below for a footer on a page. The problem with it is that, as you will be able if you run the code snippet, there are small white crescents on the bottom corners of the border.

The problem described above is being caused by the line

background-clip: padding-box;
. I cannot remove this line since it is required to create a transparent border.



footer.mycontainer.bottom {
height: 50px;
background-color: rgba(143, 90, 5, 0.88);
border: 1.5mm;
border-color: rgba(143, 90, 5, 0.88);
border-style: solid;
border-top-style: none;
-webkit-border-bottom-left-radius: 4mm;
-moz-border-radius-bottomleft: 4mm;
border-bottom-left-radius: 4mm;
-webkit-border-bottom-right-radius: 4mm;
-moz-border-radius-bottomright: 4mm;
border-bottom-right-radius: 4mm;
background-clip: padding-box;
}
.ftext.bottom {
margin: 0;
padding: 1px 15px;
height: 100%;
}
.mycontainer {
display: block;
width: 80%;
margin: 0 10%;
}

<footer class="mycontainer bottom">
<p class="ftext bottom">
Footer text from PHP
</p>
</footer>





In order to rectify the problem I tried replacing the line with code such as
background-clip: content-box;
and
background-clip: border-box;
. These attempts did not solve the problem

Answer

What I did

  1. Remove the background-clip to get rid of the cresent
  2. Set border: 0 so there's a 0px width border and nothing shows for it

The code

footer.mycontainer.bottom {
  height: 50px;
  background-color: rgba(143, 90, 5, 0.88);
  border: 0;
  border-color: rgba(143, 90, 5, 0.88);
  border-style: solid;
  border-top-style: none;
  -webkit-border-bottom-left-radius: 4mm;
  -moz-border-radius-bottomleft: 4mm;
  border-bottom-left-radius: 4mm;
  -webkit-border-bottom-right-radius: 4mm;
  -moz-border-radius-bottomright: 4mm;
  border-bottom-right-radius: 4mm;

}
.ftext.bottom {
  margin: 0;
  padding: 1px 15px;
  height: 100%;
}
.mycontainer {
  display: block;
  width: 80%;
  margin: 0 10%;
}
<footer class="mycontainer bottom">
  <p class="ftext bottom">
    Footer text from PHP
  </p>
</footer>