Thuộc tính border-radius trong CSS

Để thuận tiện tiếp thu bài hướng dẫn này thì thứ nhất bạn cần xem qua :

• Thuộc tính border trong CSS
• Thuộc tính background-color trong CSS
• Thuộc tính border-top-left-radius trong CSS
• Thuộc tính border-top-right-radius trong CSS
• Thuộc tính border-bottom-left-radius trong CSS
• Thuộc tính border-bottom-right-radius trong CSS

1) Thuộc tính border-radius trong CSS

– Thuộc tính border-radius dùng để thiết lập “độ cong” các góc của phần tử HTML.

– Ví dụ:

Các góc của thành phần này có độ cong là 10 px .

• Góc top-left của phần tử này có độ cong là 0px.
• Góc top-right của phần tử này có độ cong là 50px.
• Góc bottom-left của phần tử này có độ cong là 50px.
• Góc bottom-right của phần tử này có độ cong là 100px.

– Lưu ý: Chúng ta chỉ thấy được độ cong các góc của phần tử khi phần tử được thiết lập đường viền hoặc màu nền.

2) Cách sử dụng thuộc tính border-radius trong CSS

– Để sử dụng thuộc tính border-radius, ta dùng cú pháp như sau:

border-radius: pixel|percent|width/height|initial|inherit;

– Trong đó, ta thấy giá trị thuộc tính border-radius có thể được xác định bởi một trong năm loại:

3) Thiết lập độ cong của từng góc

– Khi chúng ta sử dụng thuộc tính border-radius với cú pháp ở phần hướng dẫn phía trên thì mặc định cả bốn góc của phần tử sẽ có chung một độ cong.

– Tuy nhiên, nếu muốn mỗi góc của phần tử có một độ cong riêng biệt (giống ví dụ bên dưới), thì ta phải làm như thế nào !?

• Góc top-left của phần tử này có độ cong là 10px.
• Góc top-right của phần tử này có độ cong là 40px.
• Góc bottom-left của phần tử này có độ cong là 50%.
• Góc bottom-right của phần tử này có độ cong là 100px.

– Để xác lập độ cong ở từng góc của thành phần thì ta có một số ít cú pháp như sau :

3.1) Cú pháp 1

border-radius: value1 value2 value3 value4;

• Góc top-left của phần tử sẽ có độ cong là value1
• Góc top-right của phần tử sẽ có độ cong là value2
• Góc bottom-right của phần tử sẽ có độ cong là value3
• Góc bottom-left của phần tử sẽ có độ cong là value4

Ví dụ :

Xem ví dụ

3.2) Cú pháp 2

border-radius: value1 value2 value3;

• Góc top-left của phần tử sẽ có độ cong là value1
• Góc top-right & bottom-leftcủa phần tử sẽ có độ cong là value2
• Góc bottom-right của phần tử sẽ có độ cong là value3

Ví dụ :

Xem ví dụ

3.3) Cú pháp 3

border-radius: value1 value2;

• Góc top-left & bottom-right của phần tử sẽ có độ cong là value1
• Góc top-right & bottom-left của phần tử sẽ có độ cong là value2

Ví dụ :

Xem ví dụ

4) Thiết lập độ cong của từng góc (khi giá trị là width/height)

– Nếu ta thiết lập độ cong từng góc của thành phần theo cách xác lập độ cong dựa vào chiều rộng và chiều cao chỉ định thì cú pháp sẽ tương đối khác so với ba cú pháp ở phần hướng dẫn phía trên .

– Dưới đây là cú pháp thiết lập độ cong của từng góc khi giá trị là width/height:

border-radius: bộ giá trị thứ nhất/bộ giá trị thứ hai;

– Trong đó:

• Bộ giá trị thứ nhất dùng để xác định chiều rộng các góc của phần tử HTML.
• Bộ giá trị thứ hai dùng để xác định chiều cao các góc của phần tử HTML.

Ví dụ 1 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :

border-radius: 250px 50px 125px 25px / 100px 25px 75px 25px;

– Khi đó:

• Góc top-left sẽ có độ cong là 250px/100px

(tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px)

• Góc top-right sẽ có độ cong là 50px/25px

(tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px)

• Góc bottom-right sẽ có độ cong là 125px/75px

(tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 75px)

• Góc bottom-left sẽ có độ cong là 25px/25px

(tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 25px 25px)

Xem ví dụVí dụ 2 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :

border-radius: 250px 50px 125px / 100px 25px;

– Khi đó:

• Góc top-left sẽ có độ cong là 250px/100px

(tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px)

• Góc top-right sẽ có độ cong là 50px/25px

(tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 50px 25px)

• Góc bottom-right sẽ có độ cong là 125px/100px

(tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 125px 100px)

• Góc bottom-left sẽ có độ cong là 50px/25px

(tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 50px 25px)

Xem ví dụVí dụ 3 :
– Nếu ta thiết lập độ cong những góc của thành phần với cú pháp như sau :

border-radius: 250px 15px / 100px 75px;

– Khi đó:

• Góc top-left sẽ có độ cong là 250px/100px

(tương đương với thuộc tính border-top-left-radius được thiết lập giá trị 250px 100px)

Xem thêm: Torrent là gì? Cách sử dụng Torrent như thế nào?

• Góc top-right sẽ có độ cong là 15px/75px

(tương đương với thuộc tính border-top-right-radius được thiết lập giá trị 15px 75px)

• Góc bottom-right sẽ có độ cong là 250px/100px

(tương đương với thuộc tính border-bottom-right-radius được thiết lập giá trị 250px 100px)

• Góc bottom-left sẽ có độ cong là 15px/75px

(tương đương với thuộc tính border-bottom-left-radius được thiết lập giá trị 15px 75px)

Xem ví dụ