ansaurus

Question

Answer 1

+3 A:

You can also do this:

  #outter {
        width: 200px;
        margin: auto;
        text-align: center;
        border: 1px solid #333;
        -moz-border-radius: 15px;
        background: red;
    }
    #inner {
        opacity: 0.5;
    }

Moving the background to the rounded parent will render correctly, see here for an example: http://jsfiddle.net/mE8En/ (only works in firefox!) add the webkit border radius if you want to support other webkit based browsers as well, like this:

-moz-border-radius: 15px; 
-webkit-border-radius: 15px;

Update for edit: To handle the inner divs in firefox subtract a pixel on the inner div to compensate for the border, resulting in this:

#outter {
    width: 200px;
    margin: auto;
    text-align: center;
    border: 1px solid #333;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background: red;
}
#outter > div:first-child {
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
     -webkit-border-top-left-radius: 14px;
     -webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
    -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
     -webkit-border-bottom-left-radius: 14px;
     -webkit-border-bottom-right-radius: 14px;
}
#inner {
    opacity: 0.5;
}

Note: the radii aren't perfect on the inner divs in webkit, adjust as desired...this is because the rendering isn't pixel perfect between browsers.

Nick Craver 2010-04-12 11:16:09

So, **defining the background on the element with the border**. (And by `other browsers` you mean webkit-based ones. :P)

ANeves 2010-04-12 11:23:07

Your solution obviously works for this simple example. And what about multiple inner divs?

Rui Carneiro 2010-04-12 11:41:12

For multiple inner divs, just change the id to a class and copy paste your html :)

Kyle Sevenoaks 2010-04-12 11:46:06

@Rui - Still works :) http://jsfiddle.net/mE8En/1/

Nick Craver 2010-04-12 11:48:39

@sr pt - Yep, I guess I take for granted what the `-webkit` means webkit browsers, updated in case that's not obvious :)

Nick Craver 2010-04-12 11:50:32

Thanks for all comments and sorry about the lack of information on my last comment. Please read my post edit for more information.

Rui Carneiro 2010-04-12 11:54:12

@Rui in that case, some other CSS3 styling is in order: http://jsfiddle.net/mE8En/2/

Nick Craver 2010-04-12 11:58:50

@Nick that was what i was trying to avoid and the reason i made this question on stackoverflow :P But I am afraid there is no other solution. Ty Nick :)

Rui Carneiro 2010-04-12 12:03:55

@Rui - Welcome :) Hopefully once CSS3 is a spec/implemented we can use one border property, one day...

Nick Craver 2010-04-12 12:06:29

Answer 2

+1 A:

Also, if you want these rounded corners in IE without images, check out DDRoundies.

Kyle Sevenoaks 2010-04-12 11:22:10

ansaurus

tags:

views:

answers:

Content boundary with rounded corners

related questions