Cách tạo góc bo tròn cho phần tử HTML bằng CSS, tạo đường viền có góc bo tròn, hình ảnh bo tròn, hình ảnh có góc bo tròn, cách sử dụng thuộc tính border-radius, khung có canh bo tròn

Cách tạo góc bo tròn cho phần tử HTML bằng CSS, tạo đường viền có góc bo tròn, hình ảnh bo tròn, hình ảnh có góc bo tròn, cách sử dụng thuộc tính border-radius, khung có canh bo tròn

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-left
top-right
bottom-left
bottom-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ụ

div{
    border-bottom-right-radius: 50px;
}
img{
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

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ụ

div {
    border:2px solid black;
    border-bottom-left-radius: 70px;
    border-bottom-right-radius: 70px;
}

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ụ

.div1{border-radius:50%;}
.div2{border-radius:10% 50%;}
.div3{border-radius:10px 30px 70px;}
.div4{border-radius:10% 30% 50% 20%;}

Tạo góc hình elip

Ví dụ

.div1{border-radius: 30px/80px;}
.div2{border-radius: 80px/30px;}

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

Click giùm một cái QUẢNG CÁO để hỗ trợ duy trì website, các bạn ơi