Grow your CSS skills. Land your dream job.

Curved Edges Issue

  • # January 5, 2010 at 8:11 pm

    Hi guys,

    I’ve never really dabbled with anything but CSS1, but today I couldn’t take no more and thought s***w IE. So here I am. I am trying to put a div with curved edges inside another div with curved edges, effectively its a double border. But the problem is the inner border (where the border would be if there was no curve), is using the background color of the body tag and instead I want it to use the outer border color.

    Final Note: This is an almost triangle shape between the 2 curves which is the background color of the page (which in programmer talk == ‘Very Annoying’)

    Here is some HTML
    —-

    <body>
    <div id="entire_content">
    <div id="topnavbar">
    </div>
    </div>
    </body>

    Here is some CSS
    —-

    body {
    background:#669dca;
    }

    #entire_content {
    width: 90%;
    border: 4px solid #fff;
    -moz-border-radius:7px;
    -webkit-border-radius: 7px;
    }

    #topnavbar {
    padding: 3px;
    background-color: #257dc5;
    -moz-border-radius-topleft:7px;
    -moz-border-radius-topright: 7px;
    -webkit-border-top-left-radius:7px;
    -webkit-border-top-right-radius:7px;
    }



    I don’t know if there is a fix for this because what it is doing is almost logical.

    But anyone who can help me, serious deserves some brownie points because Arghhhhhhhhh I’m going loopy.

    Many Thanks
    ~ Simon

    # January 8, 2010 at 6:55 pm

    bump

    # January 8, 2010 at 7:02 pm

    People will be far more inclined to help if you provide a live page that you’re working on!

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".