Inverted rounded borders css

Question

I have huge problem in achieving effect of inverted borders like on the photo. I know how it could be looking if it would be a non transparent background, but can't figure it out when it's fully transparent. Do you have any ideas? Thank you for help.

Here is my code example for non transparent background:

.box {
 width: 100px;
 height: 120px;
 margin: 0 auto;
 position: relative;
 background-image: radial-gradient(   transparent 0px,    transparent 10px,    orangered 10px,   orangered  );
 background-size: 20px 20px;
 background-position: -10px -10px;
 &:before, &:after {
   content: '';
   display: block;
   position: absolute;
   background-color: orangered;
 }
 &:before {
   top: 0;
   right: 10px;
   bottom: 0;
   left: 10px;
 }
 &:after {
   top: 10px;
   right: 0;
   bottom: 10px;
   left: 0;
 }
}


.inner-round {
  height: 100px;
  width: 100px;
  background: orangered;
}

<div class="box">
  
</div>

Example photo

Possible duplicate of http://stackoverflow.com/questions/22421880/inverted-border-radius-possible — JensV, Feb 28 '17 at 08:12
Possible duplicate of [Invert rounded corner in CSS?](http://stackoverflow.com/questions/4012085/invert-rounded-corner-in-css) — , Feb 28 '17 at 08:18

score 1 · Answer 1 · edited Jul 20 '17 at 15:59

1

Try to apply this property:

border-radius: 100%;

And visit this link for more clarification:

https://codepen.io/sergejmueller/pen/fJEml

edited Jul 20 '17 at 15:59

Andrew Myers

2,754
5
32
40

answered Feb 28 '17 at 08:13

Mohit_

49
1
7

Inverted rounded borders css

1 Answers1