Thuộc tính border-start-end-radius trong CSS
Bùi Tấn Lực - 841
- 07/10/2025
Chức năng của Thuộc tính border-start-end-radius trong CSS
Thuộc tính border-start-end-radius trong CSS thường dùng để bo tròn góc phải trên của phần tử HTML, đơn vị thường dùng là px, %, em,...
Cú pháp của Thuộc tính border-start-end-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-start-end-radius: giatri;
giatri: Giá trị này dùng để bo tròn góc phải trên theo chiều ngang và chiều dọc đều bằng số giá trị này (Ví dụ: 15px).
border-start-end-radius: giatri1 giatri2;
giatri1: Giá trị 1 dùng để bo tròn góc phải trên theo chiều ngang.
giatri2: Giá trị 2 dùng để bo tròn góc phải trên theo chiều dọc.
Áp dụng cho giá trị có đơn vị là %
border-start-end-radius: sophantram;
sophantram: Số phần trăm (Ví dụ 20%) dùng để bo tròn góc phải trên theo tỷ lệ %.
Code Thuộc tính border-start-end-radius trong CSS
border-start-end-radius: 25px; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 25px)
border-start-end-radius: 50px 15px; (Bo tròn góc phải trên theo chiều ngang 50px, Bo tròn góc phải trên theo chiều dọc 15px)
border-start-end-radius: 20%; (Bo tròn góc phải trên theo tỷ lệ %: 20%)
border-start-end-radius: 1em; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 1em)
border-start-end-radius: 3em 1em; (Bo tròn góc phải trên theo chiều ngang 3em, Bo tròn góc phải trên theo chiều dọc 1em)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-start-end-radius trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; float:left; height:auto; background:red; margin-bottom:10px; padding:20px; color:#fff}
</style>
</head>
<body>
<h1>Code Thuộc tính border-start-end-radius trong CSS</h1>
<p>Dùng để bo tròn góc phải trên của phần tử HTML, đơn vị thường dùng là px, %, em,....:</p>
<div style="border-start-end-radius: 25px;">border-start-end-radius: 25px; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 25px)</div>
<div style="border-start-end-radius: 50px 15px;">border-start-end-radius: 50px 15px; (Bo tròn góc phải trên theo chiều ngang 50px, Bo tròn góc phải trên theo chiều dọc 15px)</div>
<div style="border-start-end-radius: 20%;">border-start-end-radius: 20%; (Bo tròn góc phải trên theo tỷ lệ %: 20%)</div>
<div style="border-start-end-radius: 1em;">border-start-end-radius: 1em; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 1em)</div>
<div style="border-start-end-radius: 3em 1em;">border-start-end-radius: 3em 1em; (Bo tròn góc phải trên theo chiều ngang 3em, Bo tròn góc phải trên theo chiều dọc 1em)</div>
</body>
</html>
Cách sử dụng border-start-end-radius hiệu quả trong CSS
border-start-end-radius phát huy tác dụng khi muốn bo một góc theo vị trí logic thay vì cố định theo hướng trên, dưới, trái hoặc phải. Cách tiếp cận này đặc biệt hữu ích khi xây dựng giao diện hỗ trợ nhiều hướng viết hoặc cần thích ứng tốt với bố cục thay đổi.
Kết hợp border-start-end-radius với các thuộc tính border-radius khác
Có thể sử dụng border-start-end-radius cùng border-radius hoặc các thuộc tính bo góc riêng lẻ để tạo hình dạng linh hoạt cho một phần tử. Trong đó, thuộc tính logic này chỉ kiểm soát một góc, còn các thuộc tính khác có thể đảm nhiệm những góc còn lại.
Cách kết hợp này phù hợp với các thành phần như thẻ thông tin, hộp nội dung hoặc nút có thiết kế không đối xứng. Khi chỉ muốn thay đổi một góc mà không ảnh hưởng đến những góc khác, nên khai báo thuộc tính riêng thay vì đặt lại toàn bộ giá trị border-radius.
.card {
border-radius: 12px;
border-start-end-radius: 28px;
}
Trong ví dụ trên, toàn bộ góc được bo 12px, riêng góc được xác định bởi border-start-end-radius có bán kính 28px. Điều này giúp tạo điểm nhấn mà không cần viết lại các giá trị của từng góc.
Phân biệt border-start-end-radius với border-top-right-radius
Hai thuộc tính có thể cho kết quả giống nhau trong một số trường hợp, nhưng chúng không xác định góc theo cùng cách. border-top-right-radius luôn hướng tới góc trên bên phải theo hệ tọa độ thông thường, còn border-start-end-radius xác định góc dựa trên hướng bắt đầu của khối và hướng kết thúc của dòng.
Vì vậy, trong bố cục viết từ trái sang phải, ngang từ trên xuống, hai thuộc tính thường cùng tác động đến góc trên bên phải. Khi hướng viết thay đổi, vị trí mà border-start-end-radius tác động cũng có thể thay đổi theo, trong khi border-top-right-radius vẫn giữ ý nghĩa là góc trên bên phải.
Nếu giao diện chỉ phục vụ một hướng bố cục cố định, thuộc tính theo hướng vật lý có thể dễ hình dung hơn. Ngược lại, border-start-end-radius phù hợp khi muốn CSS thích ứng theo ngữ cảnh của bố cục.
Lưu ý khi sử dụng border-start-end-radius với giao diện responsive
Trên giao diện responsive, không nên chỉ quan tâm đến kích thước màn hình mà còn cần tính đến hướng viết và cách bố trí nội dung. Vì border-start-end-radius sử dụng logic start và end, vị trí góc được bo có thể thay đổi khi các thiết lập liên quan đến hướng viết thay đổi.
Nếu thiết kế cần giữ nguyên một góc cụ thể bất kể bố cục thay đổi, nên cân nhắc thuộc tính vật lý như border-top-right-radius. Nếu mục tiêu là để thành phần tự thích ứng với hướng trình bày, thuộc tính logic như border-start-end-radius sẽ phù hợp hơn.
Quan trọng nhất là chọn một cách xác định góc nhất quán trong toàn bộ giao diện. Điều này giúp hạn chế tình trạng cùng một thành phần hiển thị khác vị trí bo góc ngoài dự kiến khi chuyển đổi bố cục.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-start-end-radius trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
