Treehouse: Grow your CSS skills. Land your dream job.

Square shape with convex sides. Possible in CSS?

  • # October 19, 2011 at 9:59 pm

    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.

    # October 19, 2011 at 10:04 pm

    http://www.css3.info/preview/rounded-border/

    hope this helps

    # October 19, 2011 at 10:36 pm

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.