Help with Rounded Corner box

  • # September 8, 2009 at 12:03 pm

    This reply has been reported for inappropriate content.

    ok I stole your code and played…..

    because you have a height & width on your main wrapper you have to keep to it.

    anyway, here is a cleaner version so you can understand it……

    code is cleaner and is more descriptive

    Code:

    body {
    background: #0CF;
    height: 100%;

    }

    #wrapper {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 10px;
    left: 30px;
    }

    /***** top row *****/
    #boxTopLeft
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/tl.png);
    background-repeat:no-repeat;
    float:left;
    }
    #boxTopCentre
    {
    position:relative;
    top:0px;
    left:0px;
    width:460px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/tb.png);
    background-repeat:repeat-x;
    float:left;
    }
    #boxTopRight
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/tr.png);
    background-repeat:no-repeat;
    float:left;
    }

    /***** middle row *****/
    #boxMidLeft
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:460px;
    background:url(http://bjarki.info/misc/mm/style/lb.png);
    background-repeat:repeat-y;
    float:left;
    }
    #boxMidCentre
    {
    position:relative;
    top:0px;
    left:0px;
    width:460px;
    height:460px;
    background:url(http://bjarki.info/misc/mm/style/cm.png);
    background-repeat:repeat;
    float:left;
    color:#ffffff;
    }
    #boxMidRight
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:460px;
    background:url(http://bjarki.info/misc/mm/style/rb.png);
    background-repeat:repeat-y;
    float:left;
    }

    /***** bottom row *****/
    #boxBottomLeft
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/bl.png);
    background-repeat:no-repeat;
    float:left;
    }
    #boxBottomCentre
    {
    position:relative;
    top:0px;
    left:0px;
    width:460px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/bb.png);
    background-repeat:repeat-x;
    float:left;
    }
    #boxBottomRight
    {
    position:relative;
    top:0px;
    left:0px;
    width:20px;
    height:20px;
    background:url(http://bjarki.info/misc/mm/style/br.png);
    background-repeat:no-repeat;
    float:left;
    }

    Meow

    //just write in this div

Viewing 16 post (of 16 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed