There seems to be an issue arising when applying partially transparent rgba() background-color and box-shadow color values to an element with a non-fixed (percent-based) border-radius. This combination results in a minuscule transparent gap appearing at the edge of the div element between the background and the box-shadow.
The question at hand is...
How can I eliminate this gap, while still maintaining a non-fixed border-radius with transparency on both the background-color and box-shadow?
https://i.stack.imgur.com/yEDkp.png
Below is the code snippet:
html {
background-color: #cef;
font-family: arial;
}
#background-underlay{
background-color: white;
text-align: center;
margin-top: 5%;
padding-top:0px;
color: black;
}
#overlay-div{
display: flex;
position: fixed;
top: 15%;
left: 15%;
height: 70%;
width: 70%;
background-color: rgba(0, 0, 40, 0.8);
color: white;
border-radius: 50%;
box-shadow: 0px 0px 2em 2em rgba(0, 0, 40, 0.8);
}<h1 id="background-underlay">Background Text</h1>
<div id="overlay-div"></div>Description of the sample element:
I have a
<div>with a semi-transparent rgba background color and box-shadow.Both the background-color and box-shadow color values are set at
rgba(0, 0, 40, 0.8).The
border-radiusof the div is set to50%.
Attempts made so far that did not resolve the issue:
- Adjusting the
spreadvalue of the box-shadow - Adding a border to the
divwith a border-color value matching the box-shadow and background color values - Applying an
insetbox-shadow which yielded the same problem - Using the same color for
background-colorandbox-shadow - Manually adding a 1px "overlay" border with the same
rgba()color using a separate element but could not perfectly align it with the gap
Solutions attempted that only partially resolved the gap issue:
The gap disappears if I use a solid color instead of a transparent one, but this sacrifices transparency.
Changing the
opacityproperty affects nested elements within the div, disrupting transparency.Switching from percentage to fixed values for
border-radiushelps diminish the gap, but does not entirely solve the problem.