Bài 3: Hiệu ứng bo tròn (border-radius)

Bình thường, để bo tròn bạn phải sử dụng một tấm ảnh và một số thủ thuật rất phức tạp, trong CSS3 thì rất đơn giản.

border-radius: [kích cỡ];

-moz-border-radius: [kích cỡ];

-webkit-border-radius: [kích cỡ]

Trong đó moz-border-radius dành cho Firefox, -webkit-border-radius dành cho Webkit và border-radius dành cho các trình duyệt khác.

Ví dụ

[codesyntax lang="css"]

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

[/codesyntax]

Đối với trường hợp không muốn bo tròn toàn bộ

[codesyntax lang="css"]

-moz-border-radius-topright: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

[/codesyntax]

Ví dụ này cho thấy các bo tròn phần đầu bên phải và phần chân bên phải, mỗi phần 10px. Cú pháp của Firefox và Webkit khác nhau nên thận trọng để tránh nhầm lẫn.