Cách chỉnh độ cong cho các góc của một phần tử

Tìm hiểu về độ cong của một góc

Thông thường, độ cong của một góc được xác định dựa trên hai yếu tố: chiều rộng và chiều cao của góc. Ví dụ, chúng ta có thể lấy góc "phía trên bên phải" của một phần tử để làm minh họa.

Cách chỉnh độ cong cho các góc của một phần tử

Để chỉnh độ cong cho các góc của một phần tử, chúng ta sử dụng thuộc tính border-radius với cú pháp như sau:

border-radius: value;

Trong đó, value có thể được xác định dựa trên một trong ba loại giá trị: width/height.

Độ cong của góc được xác định dựa theo cặp giá trị width/height.

Trong đó:

• Width là chiều rộng của góc, có thể là giá trị pixel cụ thể hoặc tỷ lệ phần trăm chiều rộng của phần tử.
• Height là chiều cao của góc, có thể là giá trị pixel cụ thể hoặc tỷ lệ phần trăm chiều cao của phần tử.

Lưu ý: Nếu chỉ xác định một giá trị, giá trị đó sẽ đại diện cho cả width và height.

Ví dụ

Để dễ hiểu hơn, chúng ta có thể xem các ví dụ sau:

• Sử dụng giá trị mặc định của nó: mặc định, thuộc tính border-radius có giá trị là 0px.

Ảnh minh họa cách chỉnh độ cong góc bằng thuộc tính border-radius

Cách thiết lập độ cong cho từng góc

Sau khi tìm hiểu về cách chỉnh độ cong cho các góc, chúng ta cần biết rằng mặc định, cả bốn góc của một phần tử sẽ có chung một độ cong. Tuy nhiên, đôi khi chúng ta muốn mỗi góc của phần tử có một độ cong khác nhau.

Để làm được điều đó, chúng ta có hai cách cơ bản:

1. Thiết lập nhiều giá trị cho thuộc tính border-radius.
2. Thêm tên góc vào bên trong tên thuộc tính border-radius.

Trước khi đi vào chi tiết hai cách trên, chúng ta cần phải nắm rõ tên của từng góc. Dưới đây là ảnh minh họa vị trí và tên của từng góc:

Ảnh minh họa vị trí và tên của từng góc

3.1) Thiết lập nhiều giá trị cho thuộc tính border-radius

Để chỉnh độ cong riêng từng góc bằng cách thiết lập nhiều giá trị, chúng ta sử dụng thuộc tính border-radius với cú pháp như sau:

border-radius: bộ giá trị width / bộ giá trị height;

Trong đó:

• Bộ giá trị width xác định chiều rộng của từng góc.
• Bộ giá trị height xác định chiều cao của từng góc.

Mỗi bộ giá trị width (height) có thể được xác định dựa theo các tập hợp giá trị:

• Tập hợp gồm bốn giá trị: giá trị 1 là chiều rộng (chiều cao) của góc 1, giá trị 2 là chiều rộng (chiều cao) của góc 2, giá trị 3 là chiều rộng (chiều cao) của góc 3, và giá trị 4 là chiều rộng (chiều cao) của góc 4.
• Tập hợp gồm ba giá trị: giá trị 1 là chiều rộng (chiều cao) của góc 1, giá trị 2 là chiều rộng (chiều cao) của góc 2 và 4, và giá trị 3 là chiều rộng (chiều cao) của góc 3.
• Tập hợp gồm hai giá trị: giá trị 1 là chiều rộng (chiều cao) của góc 1 và 3, và giá trị 2 là chiều rộng (chiều cao) của góc 2 và 4.

Lưu ý: Nếu chỉ khai báo một bộ giá trị duy nhất, bộ giá trị đó sẽ đại diện cho cả width và height.

3.2) Thêm tên góc vào bên trong tên thuộc tính

Để chỉnh độ cong riêng từng góc bằng cách thêm tên góc vào bên trong tên thuộc tính, chúng ta sử dụng cú pháp như sau:

border-TênGóc-radius: width height;

Lưu ý: Đối với cú pháp loại này, giữa giá trị width và height không được đặt dấu gạch chéo /. Nếu chỉ khai báo một giá trị, giá trị đó sẽ đại diện cho cả width và height.