Invert rounded corner in CSS?

Question

I have a css code:

-moz-border-radius-topleft:50px; 

I get the result:

Is there any possibilities to give like this:

Answer 1

Just to update this, it seems you can in multiple ways.

Lea Verou posted a solution

Here is mine using border-image

Using border image

html

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div> 

css

div {     width: 200px;                border-width: 55px;     -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;     -webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;     -o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;     border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;     margin: 50px auto;    } 

---

Using radial gradient

Lea Verou's solution

html

<div class="inner-round"></div> 

css

.inner-round {     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); }