How to make rounded corner cut-out using CSS?

Question

I'd like to make something that looks like the below image using CSS:

I'm at a total loss on how to do that. Might someone help?

Answer 1

This can be done using two elements or one element and a pseudo-element:

HTML:

<div></div>

CSS:

div { position:relative; background-color:#333; padding:20px;
      margin:20px; float:left; }

div:before { content:""; display:block; padding:5px; background-color:#f60;
             border:2px solid white; position: absolute; top:-2px;
             right:-2px;}​

http://jsfiddle.net/Vv6Eb/

---

Update:

With border-top-right-radius:

http://jsfiddle.net/Vv6Eb/1/

Or, border-bottom-left-radius:

http://jsfiddle.net/Vv6Eb/4/