6

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.

myf
  • 9,874
  • 2
  • 37
  • 49
Rafaël De Jongh
  • 898
  • 2
  • 14
  • 32
  • 1
    what it's final result ? – Adem yalçın Oct 08 '19 at 08:19
  • You can force the border be exactly the background `border: solid 1px rgba(0,0,0,0.8);` - https://jsfiddle.net/a6wb28cr/1/ – Luís P. A. Oct 08 '19 at 08:33
  • @Luis P. A. That was my first thought but as I'm working with opacity it will be a border ontop of the rest which will cause the element to have a darker border and as it only appears in the corners and not a whole border around the div it will add up and thus make it look incorrect. – Rafaël De Jongh Oct 08 '19 at 18:20

2 Answers2

2

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Interesting concept, this could work if the content didn't had already a before and after. So while this might be an alternative solution, I do still wonder how this render problem could be fixed if at all. – Rafaël De Jongh Oct 08 '19 at 18:32
  • @RafaëlDeJongh I am also intrested to see any potential solution but I am afraid there is no one. You can still share you realy use case where you are using the pseudo element and I may find a solution to re-factor the whole code – Temani Afif Oct 08 '19 at 19:23
-1

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;
Hammed
  • 232
  • 2
  • 7
  • 1
    Ah that seems to be it! Why does it not work in the combined syntax? – Flink Oct 08 '19 at 08:31
  • 2
    you should check it does work , before answering. https://jsfiddle.net/6jd3Lgfc/ identical issue in FF + any content will also be at opacity:0.8 . IMHO it makes it worse. – G-Cyrillus Oct 08 '19 at 08:35
  • Thank you for this question, honestly I don't have the answer but I advice you to write always solid code to avoid these issues but cross browsers compatibility issues. – Hammed Oct 08 '19 at 08:41
  • @Hammed that won't help, the example is just to showcase the issue, I can not utilise opacity in that div as it would also apply to everything inside the div and for my use case it has text written in it or a picture so that would then also reduce the opacity which is not something I'd like to have. I could utilise work arounds for the opacity and the content but that's not really the problem here. – Rafaël De Jongh Oct 08 '19 at 18:26
  • I solved the exemple as he describe , tomorrow I will add an alternative solution . – Hammed Oct 08 '19 at 19:46