border-radius

Ví dụ

Ví dụ cơ bản

Sử dụng các utility như rounded-sm và rounded-md để áp dụng các kích thước border radius khác nhau cho một phần tử:

<div class="rounded-sm ..."></div><div class="rounded-md ..."></div><div class="rounded-lg ..."></div><div class="rounded-xl ..."></div>

Bo tròn các cạnh riêng biệt

Sử dụng các utility như rounded-t-md và rounded-r-lg để chỉ bo tròn một cạnh của một phần tử:

<div class="rounded-t-lg ..."></div><div class="rounded-r-lg ..."></div><div class="rounded-b-lg ..."></div><div class="rounded-l-lg ..."></div>

Bo tròn các góc riêng biệt

Sử dụng các utility như rounded-tr-md và rounded-tl-lg để chỉ bo tròn một góc của một phần tử:

<div class="rounded-tl-lg ..."></div><div class="rounded-tr-lg ..."></div><div class="rounded-br-lg ..."></div><div class="rounded-bl-lg ..."></div>

Sử dụng các thuộc tính logic

Sử dụng các utility như rounded-s-md và rounded-se-xl để thiết lập border radius bằng cách sử dụng các thuộc tính logic, ánh xạ tới các góc thích hợp dựa trên hướng văn bản:

<div dir="ltr">  <div class="rounded-s-lg ..."></div></div><div dir="rtl">  <div class="rounded-s-lg ..."></div></div>

Dưới đây là tất cả các utility thuộc tính logic border radius có sẵn và các thuộc tính vật lý tương đương của chúng trong cả hai chế độ LTR và RTL.

Để kiểm soát nhiều hơn, bạn cũng có thể sử dụng các modifier LTR và RTL để áp dụng có điều kiện các style cụ thể tùy thuộc vào hướng văn bản hiện tại.

Tạo các nút hình viên thuốc

Sử dụng utility rounded-full để tạo các nút hình viên thuốc:

<button class="rounded-full ...">Save Changes</button>

Xóa border radius

Sử dụng utility rounded-none để xóa border radius hiện có khỏi một phần tử:

<button class="rounded-none ...">Save Changes</button>

Sử dụng giá trị tùy chỉnh

Use the rounded-[<value>] syntax to set the border radius based on a completely custom value:

<div class="rounded-[2vw] ...">  <!-- ... --></div>

For CSS variables, you can also use the rounded-(<custom-property>) syntax:

<div class="rounded-(--my-radius) ...">  <!-- ... --></div>

This is just a shorthand for rounded-[var(<custom-property>)] that adds the var() function for you automatically.

Thiết kế phản hồi

Prefix a border-radius utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<div class="rounded md:rounded-lg ...">  <!-- ... --></div>

Learn more about using variants in the variants documentation.

Tùy chỉnh theme của bạn

Use the --radius-* theme variables to customize the border radius utilities in your project:

@theme {  --radius-5xl: 3rem; }

Now the rounded-5xl utility can be used in your markup:

<div class="rounded-5xl">  <!-- ... --></div>

Learn more about customizing your theme in the theme documentation.