background reverses border-radius

Question

Why reverses a background property of a lower element the border-radius set on a higher element?

I have this HTML code:

<div class="wrapper">
    <div class="content">
        <div class="header">Title</div>
        <div class="form"></div>
    </div>
</div>

And this CSS code:

.wrapper {
    background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000

    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }
}

The result is that there is no border-radius at the top, just at the bottom. If I remove the background property of the .headerclass the border-radius works on all four sides. What is the problem here?

ur present code shows border-radius.. – Arun Bertil Aug 01 '13 at 09:29 — Arun Bertil, Aug 01 '13 at 09:29
first)there is a problem with braces in css. – Farhad Aug 01 '13 at 09:31 — Farhad, Aug 01 '13 at 09:31

score 1 · Answer 1 · answered Aug 01 '13 at 09:28

1

You are nesting a selector inside other, which is wrong. Try this.

.wrapper {
    background: none repeat scroll 0 0 #F8F8F8;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000
}
    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }

this must work, and if you apply any background color on any of the child div then you have to explicitly set its corner radius..

answered Aug 01 '13 at 09:28

Hemant_Negi

1,910
1
20
25

Thank you! But I don't understand this behaviour. Why does it work this way? – Juuro Aug 01 '13 at 11:53
its simple you can not place a css selector inside other css selector. – Hemant_Negi Aug 02 '13 at 09:43
Errr, yes I can if I write SCSS. I meant why do I have to set the `border-radius` again for child elements which have a `background` property? – Juuro Aug 02 '13 at 12:58
this is becoz the childs will then cover the radius of parent container which will no longer visible as rounded, even if u set parents overflow hidden. so this is the one solution to make childs that corner rounded. you can try experiment with this, – Hemant_Negi Aug 03 '13 at 09:38
1

Ok here is detailed explanation of this problem http://stackoverflow.com/questions/3714862/forcing-child-to-obey-parents-curved-borders-in-css – Hemant_Negi Aug 03 '13 at 09:49

score 0 · Answer 2 · answered Aug 01 '13 at 09:33

Check this

http://jsfiddle.net/arunberti/LtRUu/

.wrapper {
    background: none repeat scroll 0 0 red;
    border-radius: 5px 5px 5px 5px;
    height: 250px;
    left: 100px;
    overflow: visible;
    position: absolute;
    top: 10%;
    width: 400px;
    z-index: 10000;
    color:red;
}
    .header {
        background: none repeat scroll 0 0 #222222;
        border-top-left-radius: 5px;
        box-shadow: 0 0 5px #444444;
        position: relative;
        z-index: 1;
    }

background reverses border-radius

2 Answers2