Invert rounded corner in CSS?

border, css, css-shapes, svg

Solution

In modern browsers, you can use `mask-image`:

#aux-container {
  width: 100px;
  height: 100px;
  background: #f00;
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}

<div id="aux-container"></div>

http://jsbin.com/eViJexO/1/

Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using `mask-box-image`.

Problem

I have a css code: ``` -moz-border-radius-topleft:50px; ``` I get the result: Is there any possibilities to give like this:

Original source