Bán kính đường viền Bootstrap

Responsive Border Radius được xây dựng với Bootstrap 5. Sử dụng bán kính đường viền để xác định bán kính của các góc của phần tử. Thành phần này cung cấp cho bạn khả năng thêm các góc tròn vào các phần tử

Xem Tài liệu bán kính đường viền Bootstrap để biết hướng dẫn chi tiết và thậm chí nhiều ví dụ hơn

Ví dụ cơ bản

<span class="square bg-primary rounded">span>
<span class="square bg-primary rounded-top">span>
<span class="square bg-primary rounded-end">span>
<span class="square bg-primary rounded-bottom">span>
<span class="square bg-primary rounded-start">span>
<span class="square bg-primary rounded-pill" style="width: 150px">span>
<span class="square bg-primary rounded-0">span>

Làm thế nào để sử dụng?

1. Tải xuống MDB 5 - UI KIT miễn phí

2. Chọn thành phần tùy chỉnh yêu thích của bạn và nhấp vào hình ảnh

3. Sao chép và dán mã vào dự án MDB của bạn

▶️Đăng ký kênh YouTube để nhận tài nguyên và hướng dẫn phát triển web

Thêm ví dụ

---

Thêm tài liệu Bootstrap mở rộng

• hình đại diện khởi động
• Hồ sơ khởi động
• đường viền bootstrap
• Màu Bootstrap
• nút khởi động
• Hình ảnh Bootstrap
• bảng khởi động

Bốn giá trị - bán kính đường viền. 15px 50px 30px 5px;

Ba giá trị - bán kính đường viền. 15px 50px 30px;

Hai giá trị - bán kính đường viền. 15px 50px;

Một giá trị - bán kính đường viền. 15px;

Đưa ra bản chạy thử ❯

---

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính

Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố

Thuộc tính đường viền-bán kính5. 0
4. 0 -webkit-9. 04. 0
3. 0 -moz-5. 0
3. 1 -webkit-10. 5

---

---

Cú pháp CSS

bán kính đường viền. chiều dài 1-4. %/1-4 chiều dài. %. ban đầu. thừa kế;

Ghi chú. Bốn giá trị cho mỗi bán kính được đưa ra theo thứ tự trên cùng bên trái, trên cùng bên phải, dưới cùng bên phải, dưới cùng bên trái. Nếu bỏ qua phía dưới bên trái, nó giống như phía trên bên phải. Nếu bỏ qua phía dưới bên phải, nó giống như phía trên bên trái. Nếu trên cùng bên phải bị bỏ qua, nó giống như trên cùng bên trái

Bootstrap 4 có rất nhiều lớp tiện ích/trợ giúp để nhanh chóng tạo kiểu cho các phần tử mà không cần sử dụng bất kỳ mã CSS nào

---

biên giới

Sử dụng các lớp border để thêm hoặc xóa đường viền khỏi phần tử

Thí dụ

Thí dụ

Tự mình thử »

---

Màu viền

Thêm màu vào đường viền với bất kỳ lớp màu đường viền theo ngữ cảnh nào

Thí dụ

Thí dụ

Tự mình thử »

---

Bán kính biên giới

Thêm các góc tròn vào một phần tử với các lớp rounded

Thí dụ

Thí dụ

Tự mình thử »

---

---

Nổi và Clearfix

Di chuyển phần tử sang bên phải với lớp .float-right hoặc bên trái với lớp .float-left và xóa số float với lớp .clearfix

Thí dụ

Thí dụ

  Trôi sang trái
  Trôi sang phải

Tự mình thử »

---

Phao đáp ứng

Di chuyển phần tử sang trái hoặc sang phải tùy thuộc vào độ rộng màn hình, với các lớp float đáp ứng (.float-*-left|right - trong đó * là sm (>=576px), md (>=768px), lg (>=992px) hoặc border0 (>

Thí dụ

Nổi ngay trên màn hình nhỏ hoặc rộng hơn

Nổi ngay trên màn hình trung bình hoặc rộng hơn

Nổi ngay trên màn hình lớn hoặc rộng hơn

Nổi ngay trên màn hình cực lớn hoặc rộng hơn

Thí dụ

Nổi ngay trên màn hình nhỏ hoặc rộng hơn

Nổi ngay trên màn hình trung bình hoặc rộng hơn

Nổi ngay trên màn hình lớn hoặc rộng hơn

Nổi ngay trên màn hình cực lớn hoặc rộng hơn

không nổi

Tự mình thử »

---

Căn giữa

Căn giữa một phần tử với lớp border1 (thêm lề trái và lề phải. Tự động)

Thí dụ

Thí dụ

căn giữa

Tự mình thử »

---

Bề rộng

Đặt chiều rộng của một phần tử với các lớp w-* (border2, border3, border4, border5, border6)

Thí dụ

Thí dụ

Chiều rộng 25%

Chiều rộng 50%

Chiều rộng 75%

Chiều rộng 100%

Chiều rộng tối đa 100%

Tự mình thử »

---

Chiều cao

Đặt chiều cao của phần tử với các lớp h-* (border7, border8, border9, rounded0, rounded1)

Thí dụ

Thí dụ

 

Chiều cao 25%

 

Chiều cao 50%

 

Chiều cao 75%

 

Chiều cao 100%

 

Chiều cao tối đa 100%

Tự mình thử »

---

khoảng cách

Bootstrap 4 has a wide range of responsive margin and padding utility classes. They work for all breakpoints: rounded2 (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or border0 (>=1200px)):

Các lớp được sử dụng trong định dạng. rounded7 cho rounded2 và rounded9 cho sm, md, lg và border0

Trường hợp tài sản là một trong

• .float-right4 - bộ .float-right5
• .float-right6 - bộ .float-right7

Trường hợp các bên là một trong những

• .float-right8 - bộ .float-right9 hoặc .float-left0
• .float-left1 - bộ .float-left2 hoặc .float-left3
• .float-left4 - bộ .float-left5 hoặc .float-left6
• .float-left7 - bộ .float-left8 hoặc .float-left9
• .clearfix0 - đặt cả .float-left6 và .float-left9 hoặc .float-left5 và .float-left8
• .clearfix5 - đặt cả .float-left0 và .float-left3 hoặc .float-right9 và .float-left2
• để trống - đặt .float-right5 hoặc .float-right7 trên cả 4 mặt của phần tử

Trường hợp kích thước là một trong những

• .float-*-left|right2 - bộ .float-right5 hoặc .float-right7 đến .float-*-left|right2
• .float-*-left|right6 - đặt .float-right5 hoặc .float-right7 thành .float-*-left|right9 (4px nếu cỡ chữ là 16px)
• sm0 - đặt .float-right5 hoặc .float-right7 thành sm3 (8px nếu cỡ chữ là 16px)
• sm4 - đặt .float-right5 hoặc .float-right7 thành sm7 (16px nếu cỡ chữ là 16px)
• sm8 - đặt .float-right5 hoặc .float-right7 thành md1 (24px nếu cỡ chữ là 16px)
• md2 - đặt .float-right5 hoặc .float-right7 thành md5 (48px nếu cỡ chữ là 16px)
• md6 - đặt .float-right5 thành tự động

Ghi chú. lề cũng có thể âm, bằng cách thêm chữ "n" trước kích thước

• md8 - đặt .float-right5 thành lg0 (-4px nếu cỡ chữ là 16px)
• lg1 - đặt .float-right5 thành lg3 (-8px nếu cỡ chữ là 16px)
• lg4 - đặt .float-right5 thành lg6 (-16px nếu cỡ chữ là 16px)
• lg7 - đặt .float-right5 thành lg9 (-24px nếu cỡ chữ là 16px)
• border00 - đặt .float-right5 thành border02 (-48px nếu cỡ chữ là 16px)

Thí dụ

Tôi chỉ có một phần đệm trên cùng (1. 5rem = 24px)

Tôi có phần đệm ở tất cả các mặt (3rem = 48px)

Tôi có lề ở tất cả các cạnh (3rem = 48px) và phần đệm phía dưới (3rem = 48px)

Thí dụ

Tôi chỉ có một phần đệm trên cùng (1. 5rem = 24px)

Tôi có phần đệm ở tất cả các mặt (3rem = 48px)

Tôi có lề ở tất cả các cạnh (3rem = 48px) và phần đệm phía dưới (3rem = 48px)

Tự mình thử »

Thêm ví dụ về khoảng cách

border03margin on all sidesTry itborder04margin topTry itborder05margin bottomTry itborder06margin leftTry itborder07margin rightTry itborder08margin left and rightTry itborder09margin top and bottomTry itborder10padding on all sidesTry itborder11padding topTry itborder12padding bottomTry itborder13padding leftTry itborder14padding rightTry itborder15padding top and bottomTry itborder16padding left and rightTry it

---

bóng tối

Sử dụng các lớp border17 để thêm bóng cho một phần tử

Thí dụ

Thí dụ

Không có bóng

cái bóng nhỏ

bóng mặc định

bóng lớn

Tự mình thử »

---

Căn dọc

Sử dụng các lớp border18 để thay đổi căn chỉnh của các phần tử (chỉ hoạt động trên các phần tử ô nội tuyến, khối nội tuyến, bảng nội tuyến và bảng)

Thí dụ

đường cơ sở trên cùng ở giữa dưới cùng văn bản trên cùng văn bản dưới cùng

Thí dụ

đường cơ sở
đứng đầu
tên đệm
đáy
văn bản trên cùng
văn bản dưới cùng

Tự mình thử »

---

Nhúng đáp ứng

Tạo video phản hồi hoặc nhúng trình chiếu dựa trên chiều rộng của cha mẹ

Thêm border19 vào bất kỳ phần tử nhúng nào (tương tự) trong phần tử gốc có border20 và tỷ lệ khung hình do bạn chọn

Thí dụ

Thí dụ

 

 

 

 

Tự mình thử »

---

Hiển thị

Sử dụng các lớp border21 hoặc border22 để kiểm soát khả năng hiển thị của các phần tử. Ghi chú. Các lớp này không thay đổi giá trị hiển thị CSS. Họ chỉ thêm border23 hoặc border24

Thí dụ

Thí dụ

tôi có thể nhìn thấy

tôi vô hình

Tự mình thử »

---

Chức vụ

Sử dụng lớp border25 để làm cho bất kỳ phần tử nào cố định/ở trên cùng của trang

Thí dụ

 
Tự mình thử »

Sử dụng lớp border26 để cố định bất kỳ phần tử nào/ở cuối trang

Thí dụ

 
Tự mình thử »

Sử dụng lớp border27 để cố định bất kỳ phần tử nào/ở đầu trang khi bạn cuộn qua phần tử đó. Ghi chú. Lớp này không hoạt động trong IE11 trở về trước (sẽ coi nó là border28)

Thí dụ

 
Tự mình thử »

---

đóng biểu tượng

Sử dụng lớp border29 để tạo kiểu cho biểu tượng gần. Điều này thường được sử dụng cho các cảnh báo và phương thức. Lưu ý rằng chúng tôi sử dụng ký hiệu border30 để tạo biểu tượng thực tế (dấu "x" trông đẹp hơn). Cũng lưu ý rằng nó nổi ngay theo mặc định

---

Trình đọc màn hình

Sử dụng lớp border31 để ẩn phần tử trên tất cả các thiết bị, ngoại trừ trình đọc màn hình

Thí dụ

Tôi sẽ bị ẩn trên tất cả các màn hình ngoại trừ trình đọc màn hình

Tự mình thử »

---

Màu sắc

Như được mô tả trong chương Màu sắc, đây là danh sách tất cả các lớp màu nền và văn bản

Các lớp cho màu văn bản là. border32, border33, border34, border35, border36, border37, border38, border39, border40, border41 (màu cơ thể mặc định/thường là màu đen) và border42

Thí dụ

Văn bản này bị tắt tiếng

văn bản này là quan trọng

Văn bản này cho biết thành công

Văn bản này đại diện cho một số thông tin

Văn bản này đại diện cho một cảnh báo

Văn bản này thể hiện sự nguy hiểm

Văn bản phụ

Văn bản màu xám đậm

Bài kiểm tra cơ thể

Văn bản màu xám nhạt

Tự mình thử »

Các lớp văn bản theo ngữ cảnh cũng có thể được sử dụng trên các liên kết, điều này sẽ thêm màu di chuột tối hơn

Bạn cũng có thể thêm 50% độ mờ cho văn bản đen trắng với các lớp border43 hoặc border44

Thí dụ

Văn bản màu đen với độ mờ 50% trên nền trắng

Văn bản màu trắng với độ mờ 50% trên nền đen

Tự mình thử »

---

Màu nền

Các lớp cho màu nền là. border45, border46, border47, border48, border49, border50, border51 và border52

Lưu ý rằng màu nền không đặt màu cho văn bản, vì vậy trong một số trường hợp, bạn sẽ muốn sử dụng chúng cùng với lớp border53

Thí dụ

văn bản này là quan trọng

Văn bản này cho biết thành công

Văn bản này đại diện cho một số thông tin

Văn bản này đại diện cho một cảnh báo

Văn bản này thể hiện sự nguy hiểm

Màu nền phụ

Màu nền xám đậm

Màu nền xám nhạt

Tự mình thử »

---

Kiểu chữ / Lớp văn bản

Như đã mô tả trong chương Kiểu chữ, đây là danh sách tất cả các lớp kiểu chữ/văn bản

LớpMô tảVí dụ_______2_______54Các tiêu đề hiển thị được sử dụng để nổi bật hơn các tiêu đề bình thường (cỡ chữ lớn hơn và độ đậm của phông chữ nhẹ hơn) và có bốn loại để lựa chọn. border55, border56, border57, border58Try itborder59Bold textTry itborder60Bolder bold textTry itborder61Normal textTry itborder62Light weight textTry itborder63Lighter weight textTry itborder64Italic textTry itborder65Makes a paragraph stand outTry itborder66Indicates smaller text (set to 85% of the size of the parent)Try itborder67Prevents long text from breaking layoutTry itborder68Indicates

và
). Lớp này chỉ áp dụng cho các mục danh sách con ngay lập tức (để xóa kiểu danh sách mặc định khỏi bất kỳ danh sách lồng nhau nào, hãy áp dụng lớp này cho bất kỳ danh sách lồng nhau nào)

Hãy thử nóborder82Đặt tất cả các mục danh sách trên một dòng (được sử dụng cùng với border83 trên mỗi

yếu tố)

Hãy thử nóborder84Làm cho một_______1_______Hãy thử nó

---

Phần tử khối

Để biến một phần tử thành một phần tử khối, hãy thêm lớp border85. Sử dụng bất kỳ lớp border86 nào để kiểm soát KHI phần tử phải là phần tử khối trên một chiều rộng màn hình cụ thể

Làm cách nào để cung cấp kích thước đường viền trong Bootstrap?

Sự khác biệt giữa bán kính đường viền và đường viền là gì?

Làm cách nào để xác định đường viền trong Bootstrap?

Làm cách nào để làm tròn nút bootstrap?