Làm thế nào để tạo nền div div/góc tròn?

Question

Làm thế nào tôi có thể tạo ra html/css phong cách sau đây (góc tròn, cơ bản background-color) nhấn mạnh trong hộp màu đỏ:

Answer 1

Sử dụng tài sản border-radius CSS để tạo ra biên giới làm tròn:

-moz-border-radius: 5px; /* Firefox 3.6-, removed in Firefox 13 */ 
-webkit-border-radius: 5px; /* Safari 4-, Chrome 3- */ 
border-radius: 5px;  /* Firefox 4+, Safari 5+, Chrome 4+, Opera 10.5+, IE9+ */ 

Bạn có thể bỏ qua các tiền tố, vì Firefox 3.6 hoặc các trình duyệt webkit cũ đã gần như tuyệt chủng.

Mặc dù có thể nhận các góc tròn trong OldIE (IE8-) sử dụng div + hình ảnh hoặc PIE.htc, tôi khuyên bạn nên chống lại nó: PIE không phải là rất đáng tin cậy, và thêm vài hacks HTML chỉ để có được một cái gì đó để làm việc trong IE cũ một sự lãng phí.

Xem thêm: MDN: border-radius.