Giúp mình lỗi bị tràn hình khi dùng backgound-color khi sử dụng border-radius

[anhduy89bmt]

Tình hình là em có đoạn html như sau
<div id="container">
<div id="radius">
<div id="inner">
Blah
</div>
<p>Have you seen sharp looking lenses formatted with HTML bord</p>
<p>Have you seen sharp looking lenses formatted with HTML bord</p>
</div>
</div>

CSS thì như thế nào
#container{
margin:0 auto;
}
#radius{
background:#eee;
width:500px;
border:1px solid #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

}
#inner{
background-color:#fff;
margin:px
}

Đoạn trên mình bị lỗi khi dùng background-color thì nó tràn cả ra phần mình bo góc mình không biết phải làm gì để vẫn có thể background-color mà vẫn giữ được phần bo góc.

Câu hỏi nữa là đoạn HTML của mình đã làm ổn chưa. Mình định làm một slidebar có thanh tiêu đề rồi phần nội dung . Mong mọi người giúp đỡ

[anhduy89bmt]

Tình hình của em đã fix được lỗi trên T_T cái này chắc tự biên tự diễn quá. Nhưng đụng đến cái lỗi khác mong ae giúp cho là mình có thằng border-bottom:1px dotted #000 Nhưng mặt định border này chạy từ đầu đến cuối. Mình thấy nó xâu quá mình chỉ muốn nó kéo một đoạn nhỏ xíu ở dưới thôi. Mình phải làm sao đây.
div class="box-right">
<div class="title">
ASO CONFERENCE
</div>
<p class="text"><a href="#">Lightening the load in primary care</a></p>
<p class="text"><a href="#">Healthy Beginnings – Preventing Obesity from Infancy</a></p>
<div class="button
<div class="button">
<a href="#">More event</a>
</div>
</div>
</div>

css
.box-right{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background:#fff;
width:300px;
height:200px;
}
.title{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color:#BFBEA7;
padding:4px 0 6px 10px ;
}
.text{
padding:0px 30px 5 30px;
border-bottom:1px dotted #000; // ĐÂY LÀ ĐOẠN BORDER MÌNH MONG MỌI NGƯỜI GIÚP CHO
}
.button{
background:#0391C2;
width:100px;
height:20px;
margin:0px 0px 10px 20px;
border:3px solid #bfbea7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.button a{
color:#fff;
margin:0 0 0 15px
}

[maicon]

cắt đại cái hình bỏ vào chứ còn làm sao nữa lol

[anhduy89bmt]

Tình hình là em đang học CSS . nên muốn làm thuần CSS thui. Mà mình thấy việc này cũng có thể làm được. Như quả thật là e chưa biết làm . Nhờ mấy bác đây giúp cho ạ

[maicon]

thuần css mà cứ chơi css3 thì chạy ie thế nào ? xài hình bộ là ko thuần sao @@

[anhduy89bmt]

Các bác hiểu lầm em rùi T_T . Đầu tiên em cũng nói rằng em cũng chỉ học thui nên nói chung muốn biết những thứ cơ bản để có thể xử lý thêm thôi. Nếu xài hình thôi thì những kĩ thuật khác không biết thì chết mà em thấy mấy cái web khác thì cũng làm được mà mình không làm được thì cũng không ổn lắm lắm ^_^

[Spirit]

Ý bạn cái border chạy từ đầu đến cuối và 1 đoạn thôi nghĩa là sao? :lick:

Vẽ cái hình up tui coi tui chỉ cho

[zlatan_pham]

Bạn thêm
#radius{
overflow:hidden;
}

ps: Bị tràn là do thẻ inner bạn để màu nền background-color