How to add a border radius invertedly?

Question

I'm currently trying to achieve this:

But when border-radius: 15px 15px 0 0 I get this:

That is not directly possible using border-radius. You could place a white element with a border-radius over the red rectangle ... If you need transparency of that part as well, then look into using _masks_. — CBroe, Apr 03 '17 at 11:17

score 2 · Answer 1 · answered Apr 03 '17 at 11:18

2

Border-radius alone doesn't answer this but you can do it like this:

Overflow hidden on an outer box with circle corners: https://codepen.io/sergejmueller/pen/fJEml

border-radius: 50%;

You can also use radial gradients: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00     15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);

Also mask image for a modern solution:

-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);

answered Apr 03 '17 at 11:18

Jon Wood

1,531
14
24

I think that using ::before would be better. This way you are creating unnecessary HTML markup. – Andre Aquiles Apr 03 '17 at 11:47
It's still the same idea though. ::before and ::after are just pseudo elements – Jon Wood Apr 03 '17 at 11:48
Yeah! Its the same idea indeed! +1 for that. But creating a habit of an optimized code is a good start to everyone. In a larger project, it may significantly improve his project just by using good habits such as this. – Andre Aquiles Apr 03 '17 at 11:53

score 1 · Answer 2 · answered Apr 03 '17 at 11:29

You can do using this :beforecss selector:

.box{
  background:red;
  width:50px;
  height:100px;
  border-radius:3px;
  position:relative;
  margin-top:30px;
}
.box:before{
  content:"";
  width:50px;
  height:30px;
  border-radius:100%;
  background:#fff;
  position: absolute;
  top: -17px;
}

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

How to add a border radius invertedly?

2 Answers2