CSS3 ROUNDED CORNERS (góc bo tròn)

CSS3 cung cấp thuộc tính border-radius để tạo góc bo tròn cho một phần tử. Trình duyệt hỗ trợ:

Chrome

IE/Edge

Firefox

Safari

Opera

border-radius

5.0 +

4.0 -webkit-

9.0 +

4.0 +

3.0 -moz-

5.0 +

3.1 -webkit –

10.5 +

Đối với Chrome, Firefox, hay Safari, kể từ các phiên bản Chrome 4.0, Firefox 3.0, và Safari 3.1 khi làm việc với thuộc tính border-radius có sử dụng thêm tiền tố (prefix) –webkit- hay –moz-.

Ví dụ:


#rcorners1 {

-moz-border-radius:24px;/* firefox */

-webkit-border-radius: 24px; /* chrome, safari */

border-radius: 24px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

<p id="rcorners1">Rounded corners!</p>

Kết quả :