border-top-left-radius

Try it

border-top-left-radius: 80px 80px;

border-top-left-radius: 250px 100px;

border-top-left-radius: 50%;

border-top-left-radius: 50%;
border: black 10px double;
background-clip: content-box;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a top left rounded corner.
  </div>
</section>

#example-element {
  width: 80%;
  height: 80%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #5b6dcd;
  color: white;
  padding: 10px;
}

Cú pháp

/* góc là hình tròn */
/* border-top-left-radius: radius */
border-top-left-radius: 3px;

/* góc là hình elip */
/* border-top-left-radius: horizontal vertical */
border-top-left-radius: 0.5em 1em;

border-top-left-radius: inherit;

/* Giá trị toàn cục */
border-top-left-radius: inherit;
border-top-left-radius: initial;
border-top-left-radius: revert;
border-top-left-radius: revert-layer;
border-top-left-radius: unset;

Với một giá trị:

• Giá trị là <length> hoặc <percentage> biểu thị bán kính hình tròn dùng cho đường viền tại góc đó.

Với hai giá trị:

• Giá trị đầu tiên là <length> hoặc <percentage> biểu thị bán trục lớn ngang của hình elip dùng cho đường viền tại góc đó.
• Giá trị thứ hai là <length> hoặc <percentage> biểu thị bán trục lớn dọc của hình elip dùng cho đường viền tại góc đó.

Giá trị

<length-percentage>

Biểu thị kích thước của bán kính hình tròn hoặc các trục bán lớn và bán nhỏ của hình elip. Dưới dạng độ dài tuyệt đối, nó có thể được biểu thị bằng bất kỳ đơn vị nào được phép trong kiểu dữ liệu <length> của CSS. Tỷ lệ phần trăm cho trục ngang tham chiếu đến chiều rộng của hộp, tỷ lệ phần trăm cho trục dọc tham chiếu đến chiều cao của hộp. Giá trị âm không hợp lệ.

Mô tả

Độ bo tròn có thể là hình tròn hoặc hình elip, hoặc nếu một trong các giá trị là 0, không có bo tròn nào được thực hiện và góc sẽ là góc vuông.

Nền, dù là hình ảnh hay màu sắc, đều được cắt tại đường viền, kể cả khi có bo tròn; vị trí chính xác của việc cắt được xác định bởi giá trị của thuộc tính background-clip.

Định nghĩa hình thức

Cú pháp hình thức

border-top-left-radius = 
  <border-radius>  

<border-radius> = 
  <slash-separated-border-radius-syntax>  |
  <legacy-border-radius-syntax>           

<slash-separated-border-radius-syntax> = 
  <length-percentage [0,∞]> [ / <length-percentage [0,∞]> ]?  

<legacy-border-radius-syntax> = 
  <length-percentage [0,∞]>{1,2}  

<length-percentage> = 
  <length>      |
  <percentage>  

Ví dụ

Cung tròn

Một giá trị <length> duy nhất tạo ra một cung tròn.

<div></div>

div {
  border-top-left-radius: 40px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Cung elip

Hai giá trị <length> khác nhau tạo ra một cung elip.

<div></div>

div {
  border-top-left-radius: 40px 20px;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Phần tử hình vuông với bán kính phần trăm

Một phần tử hình vuông với một giá trị <percentage> duy nhất tạo ra một cung tròn.

<div></div>

div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 100px;
  height: 100px;
}

Phần tử không hình vuông với bán kính phần trăm

Một phần tử không hình vuông với một giá trị <percentage> duy nhất tạo ra một cung elip.

<div></div>

div {
  border-top-left-radius: 40%;
  background-color: lightgreen;
  border: solid 1px black;
  width: 200px;
  height: 100px;
}

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Thuộc tính viết tắt border-radius
• border-top-right-radius, border-bottom-right-radius, và border-bottom-left-radius