border-radius - CSS

Try it

border-radius: 30px;

border-radius: 25% 10%;

border-radius: 10% 30% 50% 70%;

border-radius: 10% / 50%;

border-radius: 10px 100px / 120px;

border-radius: 50% 20% / 10% 40%;

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

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

Thuộc tính thành phần

Thuộc tính này là dạng viết tắt cho các thuộc tính CSS sau:

Cú pháp

css

/* Cú pháp của bán kính thứ nhất cho phép một đến bốn giá trị */
/* Bán kính được đặt cho cả 4 cạnh */
border-radius: 10px;

/* top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5%;

/* top-left | top-right-and-bottom-left | bottom-right */
border-radius: 2px 4px 2px;

/* top-left | top-right | bottom-right | bottom-left */
border-radius: 1px 0 3px 4px;

/* Cú pháp của bán kính thứ hai cho phép một đến bốn giá trị */
/* (các giá trị bán kính thứ nhất) / radius */
border-radius: 10px / 20px;

/* (các giá trị bán kính thứ nhất) / top-left-and-bottom-right | top-right-and-bottom-left */
border-radius: 10px 5% / 20px 30px;

/* (các giá trị bán kính thứ nhất) / top-left | top-right-and-bottom-left | bottom-right */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (các giá trị bán kính thứ nhất) / top-left | top-right | bottom-right | bottom-left */
border-radius: 10px 5% / 20px 25em 30px 35em;

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

Thuộc tính border-radius được chỉ định bằng:

một, hai, ba, hoặc bốn giá trị <length> hoặc <percentage>. Được dùng để đặt một bán kính duy nhất cho các góc.
tùy chọn theo sau bởi "/" và một, hai, ba, hoặc bốn giá trị <length> hoặc <percentage>. Được dùng để đặt thêm một bán kính, tạo góc tròn hình elip.

Giá trị

A light blue rectangle with a light gray border. All 4 corners are rounded.

A light blue rectangle with a light gray border. The 2 corners on the top left and the bottom right have are rounded.

<length>: Biểu thị kích thước của bán kính đường tròn, hoặc trục bán trục lớn và bán trục nhỏ của elip, bằng giá trị độ dài. Giá trị âm không hợp lệ.
<percentage>: Biểu thị kích thước của bán kính đường tròn, hoặc trục bán trục lớn và bán trục nhỏ của elip, bằng giá trị phần trăm. Phần trăm cho trục ngang tham chiếu đến chiều rộng của hộp; 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ệ.

Ví dụ:

css

border-radius: 1em / 5em;

/* Tương đương: */
border-top-left-radius: 1em 5em;
border-top-right-radius: 1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius: 1em 5em;

css

border-radius: 4px 3px 6px / 2px 4px;

/* Tương đương: */
border-top-left-radius: 4px 2px;
border-top-right-radius: 3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius: 3px 4px;

Mô tả

Bán kính áp dụng cho toàn bộ background, ngay cả khi phần tử không có đường viền; vị trí cắt chính xác được xác định bởi thuộc tính background-clip.

Thuộc tính border-radius không áp dụng cho các phần tử bảng khi border-collapse là collapse.

Note: Như với bất kỳ thuộc tính viết tắt nào, các thuộc tính con riêng lẻ không thể kế thừa, chẳng hạn trong border-radius:0 0 inherit inherit, điều này sẽ ghi đè một phần các định nghĩa hiện có. Thay vào đó, phải sử dụng các thuộc tính dài riêng lẻ.

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

Initial value	as each of the properties of the shorthand: `border-top-left-radius`: `0` `border-top-right-radius`: `0` `border-bottom-right-radius`: `0` `border-bottom-left-radius`: `0`
Applies to	all elements; but User Agents are not required to apply to `table` and `inline-table` elements when `border-collapse` is `collapse`. The behavior on internal table elements is undefined for the moment.. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Computed value	as each of the properties of the shorthand: `border-bottom-left-radius`: two absolute `<length>`s or `<percentage>`s `border-bottom-right-radius`: two absolute `<length>`s or `<percentage>`s `border-top-left-radius`: two absolute `<length>`s or `<percentage>`s `border-top-right-radius`: two absolute `<length>`s or `<percentage>`s
Animation type	as each of the properties of the shorthand: `border-top-left-radius`: a length, percentage or calc(); `border-top-right-radius`: a length, percentage or calc(); `border-bottom-right-radius`: a length, percentage or calc(); `border-bottom-left-radius`: a length, percentage or calc();

Cú pháp hình thức

border-radius = 
  <length-percentage [0,∞]>{1,4} [ / <length-percentage [0,∞]>{1,4} ]?  

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

Ví dụ

So sánh các kiểu đường viền

Ví dụ dưới đây có bảy phần tử <pre>, mỗi phần tử minh họa các kết hợp kiểu border và border-radius. Các kiểu áp dụng cho mỗi phần tử <pre> được đưa vào nội dung của phần tử, để bạn có thể thấy các khai báo CSS cần thiết để tạo kiểu đường viền tương ứng:

<pre id="example-1">
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
</pre>

<pre id="example-2">
  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre id="example-3">
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
</pre>

<pre id="example-4">
  border: none;
  border-radius: 40px 10px;
  background: gold;
</pre>

<pre id="example-5">
  border: none;
  border-radius: 50%;
  background: burlywood;
</pre>

<pre id="example-6">
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre id="example-7">
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

pre {
  margin: 20px;
  padding: 20px;
  width: 80%;
  height: 50px;
}

pre#example-1 {
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

pre#example-2 {
  border: groove 1em red;
  border-radius: 2em;
}

pre#example-3 {
  background: gold;
  border: ridge gold;
  border-radius: 13em / 3em;
}

pre#example-4 {
  border: none;
  border-radius: 40px 10px;
  background: gold;
}

pre#example-5 {
  border: none;
  border-radius: 50%;
  background: burlywood;
}

pre#example-6 {
  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
}

pre#example-7 {
  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
}

Sử dụng `corner-shape` cùng với `border-radius`

Khi giá trị border-radius khác 0 được áp dụng cho một góc của hộp, bạn có thể sử dụng thuộc tính corner-shape (hoặc một trong các dạng dài và viết tắt của nó) để áp dụng các hình dạng tùy chỉnh cho góc đó, chẳng hạn như vát cạnh, khía, hoặc squircle. Ví dụ này minh họa cách dùng corner-shape.

HTML

Đánh dấu cho ví dụ này chứa một phần tử <div> duy nhất.

html

<div></div>

CSS

Chúng tôi đặt một số kiểu cơ bản cho hộp, đã ẩn để ngắn gọn. Chúng tôi cũng áp dụng box-shadow, border-radius là 0 20% 50px 30%, và corner-shape là superellipse(0.5) bevel notch squircle.

body {
  font-family: "Helvetica", "Arial", sans-serif;
  width: 240px;
  margin: 20px auto;
}

div {
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: green;
  background-image: linear-gradient(
    to bottom,
    rgb(255 255 255 / 0),
    rgb(255 255 255 / 0.5)
  );
}

css

div {
  box-shadow: 1px 1px 3px gray;
  border-radius: 0 20% 50px 30%;
  corner-shape: superellipse(0.5) bevel notch squircle;
}

Kết quả

Kết quả hiển thị trông như thế này:

Lưu ý rằng không có hình dạng góc nào được áp dụng cho góc trên-trái, vì nó có giá trị border-radius là 0.

Đặc tả kỹ thuật

Specification
CSS Backgrounds and Borders Module Level 3 # border-radius

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

Xem thêm

Các thuộc tính CSS liên quan đến border-radius: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content

radius		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở mỗi góc. Chỉ dùng trong cú pháp một giá trị.
top-left-and-bottom-right		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc trên-trái và góc dưới-phải của hộp phần tử. Chỉ dùng trong cú pháp hai giá trị.
top-right-and-bottom-left		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc trên-phải và góc dưới-trái của hộp phần tử. Chỉ dùng trong cú pháp hai và ba giá trị.
top-left		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc trên-trái của hộp phần tử. Chỉ dùng trong cú pháp ba và bốn giá trị.
top-right		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc trên-phải của hộp phần tử. Chỉ dùng trong cú pháp bốn giá trị.
bottom-right		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc dưới-phải của hộp phần tử. Chỉ dùng trong cú pháp ba và bốn giá trị.
bottom-left		Là giá trị `<length>` hoặc `<percentage>` biểu thị bán kính dùng cho đường viền ở góc dưới-trái của hộp phần tử. Chỉ dùng trong cú pháp bốn giá trị.