Cách tạo góc bo tròn cho phần tử HTML bằng CSS

Thuộc tính border-radius dùng để tạo góc bo tròn cho các phần tử, hình ảnh,…..
Cách tạo góc bo tròn cho phần tử HTML bằng CSS
Cách tạo góc bo tròn cho phần tử
Một phần tử luôn có bốn góc ở bốn vị trí như sau:

top-lefttop-rightbottom-leftbottom-right
Để tạo góc bo tròn cho phần tử dựa theo từng vị trí cụ thể, ta sử dụng cú pháp:

border-vị trí-radius: độ bo tròn của góc;
Độ bo tròn của góc có thể xác định theo đơn vị: px, em, hoặc %

Ví dụ

Thuộc tính border-radius thường được sử dụng chung với thuộc tính border để tạo đường viền bo tròn

Ví dụ

Cú pháp rút gọn
Thông thường, để bo tròn bốn góc cho một phần tử ta phải dùng đến bốn thuộc tính.

Bây giờ, chỉ với một một thuộc tính border-radius ta có thế bo tròn cho cả bốn góc.

Thuộc tính border-radius có bốn cách sử dụng:

border-radius: value;
Cả bốn góc đều có giá trị là value
border-radius: value1 value2;
Góc top-left và bottom-right có giá trị value1
Góc top-right và bottom-left có giá trị value2
border-radius: value1 value2 value3;
Góc top-left có giá trị value1
Góc top-right và bottom-left có giá trị value2
Góc bottom-right có giá trị value3
border-radius: value1 value2 value3 value4;
Góc top-left có giá trị value1
Góc top-right có giá trị value2
Góc bottom-right có giá trị value3
Góc bottom-left có giá trị value4
Ví dụ

Tạo góc hình elip
Ví dụ

 

Học CSS