Anti aliasing border radius Issue when using rgba values

user_4843705 0
Viewed 804

I'm having an issue where when I use border radius in combination of rgba valued colors like let's say rgba(255,255,255,.8) and then use a box-shadow to somewhat make the box appear feathered I get the issue that the corners are not solid as can be seen in this image.

enter image description here

Detail of the top left corner: enter image description here

As can be seen, the edges when using border radius in combination with the other CSS element it makes a weird transparent edge when border-radius is set in place.

I've tried quite a bit but without much success, here's a code attempt as I wanted to attempt this for another project but just simply replicated it here: https://jsfiddle.net/01u7gbxa/1/

The code itself can be applied on any object so it seems which resolves to the same results:

  background:rgba(0,0,0,.8);
  box-shadow:0 0 15px 30px rgba(0,0,0,.8);
  border-radius:60px;

Does anyone know if this is possible to fix at all?

Thanks in advance for further information.

box-shadow css
2 Answers

You can do the same using blur filter. Apply it to a pseudo element to not affect any potential content

body {
  background: #f00;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

.box {
  width: 500px;
  height: 200px;
  border-radius: 60px;
  position: relative;
}

.box:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: rgba(0, 0, 0, .8);
  border-radius: inherit;
  filter: blur(10px);
}
<div class="box"></div>

user_86203330

Change these :

  background:rgba(0,0,0,.8);
    box-shadow:0 0 15px 30px rgba(0,0,0,.8);

to these:

   background-color: #000;
   box-shadow:0 0 15px 30px #000;
   opacity : 0.8;
user_106020050
Related