Square shape with convex sides. Possible in CSS?

[markoffchaney]

I’m trying to create a rounded square shape where each side is a convex arc rather than a straight line. The result would be a rounded box that resembles an old television screen. I’ve posted an image here. Is this possible to create using only CSS?

I’ve only been able to curve two sides of the box:
#screen {
display:block;
width: 180px;
height: 180px;
background-color: red;
-webkit-border-radius: 50%/10%;
border-radius: 50%/10%;
}

Any thoughts?

Thanks in advance.

[joshuanhibbert]

Like this? http://jsfiddle.net/sl1dr/u3YJt/

[Author]

Posts