Thuộc tính border-end-end-radius trong CSS
Bùi Tấn Lực - 834
- 07/10/2025
Chức năng của Thuộc tính border-end-end-radius trong CSS
Thuộc tính border-end-end-radius trong CSS thường dùng để bo tròn góc phải dưới 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-end-end-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-end-end-radius: giatri;
giatri: Giá trị này dùng để bo tròn góc phải dưới theo chiều ngang và chiều dọc đều bằng số giá trị này (Ví dụ: 15px).
border-end-end-radius: giatri1 giatri2;
giatri1: Giá trị 1 dùng để bo tròn góc phải dưới theo chiều ngang.
giatri2: Giá trị 2 dùng để bo tròn góc phải dưới theo chiều dọc.
Áp dụng cho giá trị có đơn vị là %
border-end-end-radius: sophantram;
sophantram: Số phần trăm (Ví dụ 20%) dùng để bo tròn góc phải dưới theo tỷ lệ %.
Code Thuộc tính border-end-end-radius trong CSS
border-end-end-radius: 25px; (Bo tròn góc phải dưới theo chiều ngang và chiều dọc đều 25px)
border-end-end-radius: 50px 15px; (Bo tròn góc phải dưới theo chiều ngang 50px, Bo tròn góc phải dưới theo chiều dọc 15px)
border-end-end-radius: 20%; (Bo tròn góc phải dưới theo tỷ lệ %: 20%)
border-end-end-radius: 1em; (Bo tròn góc phải dưới theo chiều ngang và chiều dọc đều 1em)
border-end-end-radius: 3em 1em; (Bo tròn góc phải dưới theo chiều ngang 3em, Bo tròn góc phải dưới theo chiều dọc 1em)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-end-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-end-end-radius trong CSS</h1>
<p>Thuộc tính border-end-end-radius trong CSS thường dùng để bo tròn góc phải dưới của phần tử HTML, đơn vị thường dùng là px, %, em,....:</p>
<div style="border-end-end-radius: 25px;">border-end-end-radius: 25px; (Bo tròn góc phải dưới theo chiều ngang và chiều dọc đều 25px)</div>
<div style="border-end-end-radius: 50px 15px;">border-end-end-radius: 50px 15px; (Bo tròn góc phải dưới theo chiều ngang 50px, Bo tròn góc phải dưới theo chiều dọc 15px)</div>
<div style="border-end-end-radius: 20%;">border-end-end-radius: 20%; (Bo tròn góc phải dưới theo tỷ lệ %: 20%)</div>
<div style="border-end-end-radius: 1em;">border-end-end-radius: 1em; (Bo tròn góc phải dưới theo chiều ngang và chiều dọc đều 1em)</div>
<div style="border-end-end-radius: 3em 1em;">border-end-end-radius: 3em 1em; (Bo tròn góc phải dưới theo chiều ngang 3em, Bo tròn góc phải dưới theo chiều dọc 1em)</div>
</body>
</html>
border-end-end-radius thay đổi theo writing-mode và direction như thế nào?
Điểm đặc biệt của border-end-end-radius là nó không gắn cố định với một góc như các thuộc tính border-top-left-radius hay border-bottom-right-radius. Vị trí góc được xác định dựa trên hướng của dòng chữ và chiều của khối nội dung.
Vì vậy, khi thay đổi writing-mode hoặc direction, góc được bo bởi border-end-end-radius cũng có thể thay đổi theo. Đây là ưu điểm quan trọng khi xây dựng giao diện hỗ trợ nhiều kiểu ngôn ngữ và bố cục.
border-end-end-radius trong writing-mode ngang
Với cách trình bày văn bản ngang thông thường, inline-end nằm ở phía cuối dòng và block-end nằm ở phía cuối khối. Khi đó, border-end-end-radius sẽ tác động lên góc giao nhau giữa hai hướng này.
Ở bố cục ngang từ trái sang phải, góc này thường tương ứng với góc dưới bên phải. Vì thế, trong trường hợp thông dụng, kết quả có thể trông giống với việc sử dụng border-bottom-right-radius.
.box {
border-end-end-radius: 20px;
}
Điểm cần lưu ý là đây chỉ là vị trí trong một kiểu bố cục cụ thể. Không nên xem border-end-end-radius như một tên gọi khác của một góc vật lý cố định.
border-end-end-radius khi sử dụng direction: rtl
Khi direction: rtl được áp dụng cho nội dung viết từ phải sang trái, hướng inline-end thay đổi. Do đó, góc được tác động bởi border-end-end-radius cũng được xác định lại theo hướng mới.
Đây là điểm hữu ích khi thiết kế giao diện có thể chuyển đổi giữa các hướng văn bản. Thay vì phải thay đổi từng thuộc tính bo góc theo ngôn ngữ, bạn có thể giữ nguyên quy tắc CSS logic và để trình duyệt xác định vị trí góc phù hợp.
.box {
direction: rtl;
border-end-end-radius: 20px;
}
Cách viết này đặc biệt phù hợp với các thành phần giao diện cần hoạt động nhất quán ở cả bố cục LTR và RTL.
border-end-end-radius trong bố cục chữ viết dọc
Khi sử dụng writing-mode để chuyển nội dung sang cách viết dọc, khái niệm góc cuối khối và cuối dòng không còn trùng với cách hiểu quen thuộc trong bố cục ngang. Vì vậy, vị trí bo góc của border-end-end-radius cũng có thể thay đổi.
.box {
writing-mode: vertical-rl;
border-end-end-radius: 20px;
}
Thay vì suy đoán góc dựa trên vị trí trên màn hình, hãy xác định block-end và inline-end trong writing mode đang sử dụng. Cách tiếp cận này giúp CSS hoạt động đúng ngay cả khi hướng trình bày nội dung thay đổi.
Cách xác định góc bo dựa trên block-end và inline-end
Có thể hiểu đơn giản border-end-end-radius là điểm giao nhau giữa block-end và inline-end. Muốn xác định chính xác góc nào được bo, trước tiên cần biết hai hướng này đang nằm ở đâu trong bố cục hiện tại.
- block-end là phía kết thúc của hướng khối.
- inline-end là phía kết thúc của hướng nội tuyến.
- Giao điểm của hai hướng này chính là vị trí mà border-end-end-radius tác động.
Nhờ cách xác định theo hướng logic, thuộc tính này giúp giảm sự phụ thuộc vào các tên góc vật lý như trên, dưới, trái hoặc phải. Đây cũng là lý do nên ưu tiên logical properties khi giao diện cần hỗ trợ nhiều hướng viết hoặc có khả năng thay đổi bố cục trong tương lai.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-end-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 *
