Get a free trial // 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

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

    Here is some CSS

    body {

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

    #topnavbar {
    padding: 3px;
    background-color: #257dc5;
    -moz-border-radius-topright: 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


    # 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.

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

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed