Tìm hiểu về thuộc tính border-radius trong CSS3

Trong CSS3, thuộc tính border-radius được sử dụng để bo tròn góc của border. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng thuộc tính border-radius trong CSS3 thông qua những ví dụ nổi bật.

Trước đây, khi bạn muốn bo tròn bốn góc thì phải sử dụng photoshop để cắt 4 góc và tạo background. Tuy nhiên, với CSS3, quá trình này trở nên đơn giản hơn, không cần phải sử dụng những thao tác phức tạp đó. CSS3 đã cung cấp cho chúng ta thuộc tính border-radius để bo tròn góc.

Ngày nay, người ta ưa chuộng thiết kế dạng flat phẳng, nhưng vẫn có nhiều khách hàng muốn có chút đường cong để trở nên sinh động hơn, và trong trường hợp đó, border-radius là sự lựa chọn tốt nhất.

Ảnh 1: Bo đường viền

1. Border-radius trong CSS3

Khi muốn bo tròn đường viền bằng CSS3, ta sử dụng cú pháp như sau:

border-radius: 20px;
border-radius: 20px 20px;
border-radius: 20px 20px 20px;
border-radius: 20px 20px 20px 20px;

Để đảm bảo tương thích trên các trình duyệt, ta nên thêm hai thuộc tính hack CSS sau:

-moz-border-radius: 20px;
-webkit-border-radius: 20px;

Giá trị tham số của đơn vị tính chiều dài có thể là px, pt hoặc %. Mỗi cách sử dụng đều có những tác dụng khác nhau. Để hiểu rõ hơn, ta sẽ định nghĩa 4 góc như sau:

Ảnh 2: Định nghĩa 4 góc

Dưới đây là các trường hợp sử dụng:

Trường hợp 1: Một tham số

Với trường hợp này, thuộc tính border-radius có tác dụng với cả bốn góc.

Ví dụ:

border-radius: 20px;

Ảnh 3: Sử dụng thuộc tính border-radius với một tham số

Trường hợp 2: Hai tham số

Với trường hợp này, thuộc tính border-radius có tác dụng như sau:

• Tham số đầu tiên là 1 và 3.
• Tham số thứ hai là 2 và 4.

Ví dụ:

border-radius: 50px 20px.

Ảnh 4: Sử dụng thuộc tính border-radius với hai tham số

Trường hợp 3: Ba tham số

Với trường hợp này:

• Tham số đầu tiên là 1.
• Tham số thứ hai là 2 và 4.
• Tham số thứ ba là 3.

Ví dụ:

border-radius: 20px 30px 60px

Ảnh 5: Sử dụng thuộc tính border-radius với ba tham số

Trường hợp 4: Bốn tham số

Với trường hợp này, thuộc tính border-radius sẽ tương ứng với 4 góc.

Ví dụ:

border-radius: 15px 35px 55px 60%

Ảnh 6: Sử dụng thuộc tính border-radius với bốn tham số

2. Ví dụ border-radius trong CSS3

Dưới đây là một số ví dụ:

Dùng border-radius để tạo hình tròn:

Để tạo hình tròn, ta chỉ cần thiết lập width và height của thẻ HTML bằng nhau và bo tròn bốn góc với giá trị là 50%.

Ví dụ:

Kết quả:

Ảnh 7: Sử dụng thuộc tính border-radius tạo hình tròn

Tạo button được bo bốn cạnh:

Ví dụ:

Kết quả:

Ảnh 8: Sử dụng thuộc tính border-radius tạo button

3. Lời kết

Như vậy, bạn đã thấy rằng thuộc tính border-radius không cần phải sử dụng hình ảnh. Tuy nhiên, hãy lưu ý rằng do đây là CSS3, nên nó có hạn chế và không hoạt động trên các trình duyệt cũ.

Bài 1: Thuộc tính border-radius trong CSS3

Bài viết nằm trong Case Study Hướng dẫn CSS cơ bản và nâng cao

Bộ Series: Hướng dẫn học CSS