Buộc trẻ phải tuân theo đường viền cong của cha mẹ trong CSS

Tôi có một div bên trong của một div khác. #outervà #inner. #outercó viền cong và nền trắng. #innerkhông có đường viền cong và nền màu xanh lá cây. #innermở rộng ra ngoài biên giới cong của #outer. Có cách nào để ngăn chặn điều này?

#outer { 
        display: block; float: right; margin: 0; width: 200px;
        background-color: white; overflow: hidden;
        -moz-border-radius: 10px; 
        -khtml-border-radius: 10px; 
        -webkit-border-radius: 10px; 
        border-radius: 10px; 
    }
    #inner { background-color: #209400; height: 10px; border-top: none; }

 <div id="outer">
        <div id="inner"></div>
        <!-- other stuff needs a white background -->
        <!-- bottom corners needs a white background -->
    </div>


    

Dù tôi có cố gắng thế nào thì nó vẫn chồng chéo. Làm thế nào tôi có thể #innertuân theo và điền vào #outerbiên giới?

biên tập

Các hack sau đây phục vụ mục đích cho bây giờ. Nhưng câu hỏi đặt ra (có thể cho các nhà văn CSS3 và webbrowser): Tại sao các phần tử con không tuân theo đường viền cong của cha mẹ chúng và có cách nào để buộc chúng không?

Việc hack để giải quyết vấn đề này cho nhu cầu của tôi bây giờ, bạn có thể gán đường cong cho các đường viền riêng lẻ. Vì vậy, với mục đích của mình, tôi chỉ gán một đường cong cho hai phần tử bên trong.

#inner {
    border-top-right-radius: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px;
    border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px;
}

Theo thông số kỹ thuật:

Hình nền của hộp, nhưng không phải hình ảnh viền của nó, được cắt theo đường cong thích hợp (như được xác định bởi 'clip nền'). Các hiệu ứng khác cắt vào viền hoặc cạnh đệm (chẳng hạn như 'tràn' ngoài 'hiển thị') cũng phải cắt theo đường cong. Nội dung của các yếu tố thay thế luôn được cắt theo đường cong cạnh nội dung. Ngoài ra, khu vực bên ngoài đường cong của cạnh biên không chấp nhận các sự kiện chuột thay mặt cho phần tử.

http://www.w3.org/TR/css3-background/#the-border-radius

Điều này có nghĩa rằng một overflow: hiddentrên #outernên làm việc. Tuy nhiên, điều này sẽ không hoạt động cho Firefox 3.6 trở xuống. Điều này đã được sửa trong Firefox 4:

Các góc được làm tròn bây giờ nội dung clip và hình ảnh (nếu tràn: hiển thị không được đặt).

https://developer.mozilla.org/en/CSS/-moz-border-radius

Vì vậy, bạn vẫn sẽ cần sửa chữa, chỉ cần rút ngắn nó thành:

#outer {
  overflow: hidden;
}

#inner {
  -moz-border-radius: 10px 10px 0 0;
}

Xem nó hoạt động ở đây: http://jsfiddle.net/VaTAZ/3/

Điều gì sẽ xảy ra với điều này?

#outer { 
    display: block; float: right; margin: 0; width: 200px;
    background-color: white; overflow: hidden;
}
#inner { background-color: #209400; height: 10px; border-top: none; }

#outer, #inner{
    -moz-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
}

Nếu bạn muốn các cạnh sắc nét ở phía dưới: Sử dụng các:

viền-trên-trái-bán kính: 10px;
viền-trên-phải-bán kính: 10px; 

-moz-Border-radius-topleft
-moz-Border-radius-topright

Bạn đã thử làm vị trí: tương đối cho div bên trong chưa ???

đó là:

#inner { 
    background-color: #209400; 
    height: 10px; 
    border-top: none; 
    position: relative; 
    left: 15px; 
    top: 15px; 
}