Css & Html : Hide Corner Of The Borders

I have following UI. I want to hide only corner of the div of three colors. it should be look like something this. _ | | - Can Anyone has idea how to hide the corners of the di

Solution 1:

This is little messy, dirty, but it will give desired result.

#container
{
    position:relative;
    top:20px;
    left:20px;
    width:200px;
    height:200px;
    border:solid 1px black;
    padding:10px;
}
#tl, #tr, #bl, #br
{
    position:absolute;
    width:10px; height:10px;
    background-color:white;
    display:block;
}
#tl {top:-1px; left:-1px;} /*top left corner*/#tr {top:-1px; right:-1px;} /*top right*/#bl {bottom:-1px; left:-1px;} /*bottom left*/#br {bottom:-1px; right:-1px;} /*bottom right */

<divid="container"><divid="tl"></div><divid="tr"></div><divid="bl"></div><divid="br"></div>
    Hello there
</div>

But, point is: background-color of page, container div and that divs for corners must be same color.

There is fiddle example so adding border for those "corners" You'll see how it's working.

You have to pay attention for padding for container; positioning and height and width for those corners.

Update : I made just little changes about positioning, height and width of corner divs. Old one take too much space out of container div.

btw. You can remove height for container. I set it just for example.