Thuộc tính border-end-start-radius trong CSS
Bùi Tấn Lực - 890
- 07/10/2025
Chức năng của Thuộc tính border-end-start-radius trong CSS
Thuộc tính border-end-start-radius trong CSS thường dùng để bo tròn góc trá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-start-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-end-start-radius: giatri;
giatri: Giá trị này dùng để bo tròn góc trá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-start-radius: giatri1 giatri2;
giatri1: Giá trị 1 dùng để bo tròn góc trái dưới theo chiều ngang.
giatri2: Giá trị 2 dùng để bo tròn góc trái dưới theo chiều dọc.
Áp dụng cho giá trị có đơn vị là %
border-end-start-radius: sophantram;
sophantram: Số phần trăm (Ví dụ 20%) dùng để bo tròn góc trái dưới theo tỷ lệ %.
Code Thuộc tính border-end-start-radius trong CSS
border-end-start-radius: 25px; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 25px)
border-end-start-radius: 50px 15px; (Bo tròn góc trái dưới theo chiều ngang 50px, Bo tròn góc trái dưới theo chiều dọc 15px)
border-end-start-radius: 20%; (Bo tròn góc trái dưới theo tỷ lệ %: 20%)
border-end-start-radius: 1em; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 1em)
border-end-start-radius: 3em 1em; (Bo tròn góc trái dưới theo chiều ngang 3em, Bo tròn góc trái dưới theo chiều dọc 1em)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-end-start-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-start-radius trong CSS</h1>
<p>Dùng để bo tròn góc trái dưới của phần tử HTML, đơn vị thường dùng là px, %, em,...:</p>
<div style="border-end-start-radius: 25px;">border-end-start-radius: 25px; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 25px)</div>
<div style="border-end-start-radius: 50px 15px;">border-end-start-radius: 50px 15px; (Bo tròn góc trái dưới theo chiều ngang 50px, Bo tròn góc trái dưới theo chiều dọc 15px)</div>
<div style="border-end-start-radius: 20%;">border-end-start-radius: 20%; (Bo tròn góc trái dưới theo tỷ lệ %: 20%)</div>
<div style="border-end-start-radius: 1em;">border-end-start-radius: 1em; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 1em)</div>
<div style="border-end-start-radius: 3em 1em;">border-end-start-radius: 3em 1em; (Bo tròn góc trái dưới theo chiều ngang 3em, Bo tròn góc trái dưới theo chiều dọc 1em)</div>
</body>
</html>
Ứng dụng border-end-start-radius trong thiết kế giao diện CSS
border-end-start-radius phù hợp khi cần tạo góc bo theo vị trí tương đối thay vì cố định theo trái, phải, trên hoặc dưới. Cách tiếp cận này đặc biệt hữu ích trong giao diện có nhiều hướng viết hoặc cần tái sử dụng cùng một bộ CSS cho nhiều bố cục.
Tạo kiểu bo góc linh hoạt cho các thành phần giao diện
Thuộc tính này có thể dùng để tạo điểm nhấn cho thẻ nội dung, nút bấm, hộp thông tin, ảnh hoặc các khối giao diện có một góc cần bo khác biệt. Thay vì thiết lập nhiều thuộc tính riêng cho từng góc, bạn chỉ cần xác định đúng góc theo quy tắc hướng viết của CSS.
Ví dụ, có thể tạo một hộp nội dung với góc bắt đầu ở cuối được bo tròn:
.box {
border: 1px solid #ddd;
border-end-start-radius: 20px;
}
Cách này giúp kiểu dáng rõ ràng hơn khi mục tiêu thiết kế gắn với vị trí đầu-cuối của phần tử, thay vì phụ thuộc trực tiếp vào góc trái dưới hay một góc cố định nào khác.
Kết hợp border-end-start-radius với các thuộc tính border-radius khác
border-end-start-radius không nhất thiết phải sử dụng độc lập. Bạn có thể kết hợp nó với các thuộc tính bo góc khác để tạo giao diện có hình dạng riêng, chẳng hạn chỉ bo một số góc hoặc tạo mức bo khác nhau giữa các vị trí.
Ví dụ:
.card {
border: 1px solid #ddd;
border-top-left-radius: 12px;
border-end-start-radius: 24px;
}
Khi kết hợp, nên xác định rõ mục đích của từng thuộc tính để tránh thiết lập chồng chéo khó kiểm soát. Với giao diện sử dụng CSS hiện đại, các thuộc tính theo hướng viết như border-end-start-radius có thể giúp quy tắc tạo kiểu dễ thích nghi hơn.
Lưu ý khi sử dụng border-end-start-radius với hướng viết CSS
Điểm quan trọng nhất là border-end-start-radius không nên được hiểu đơn giản là một góc cố định như “góc trái dưới”. Vị trí thực tế của góc được xác định dựa trên writing-mode và direction của phần tử.
Vì vậy, khi xây dựng giao diện hỗ trợ nhiều ngôn ngữ hoặc thay đổi hướng nội dung, nên ưu tiên các thuộc tính logic như thuộc tính này. Cách viết đó giúp kiểu bo góc bám theo cấu trúc nội dung thay vì phải tạo thêm CSS cho từng hướng hiển thị.
Nếu giao diện chỉ sử dụng một hướng viết cố định, bạn vẫn có thể dùng thuộc tính này khi muốn biểu đạt rõ ý nghĩa của góc theo logic bố cục. Ngược lại, nếu cần kiểm soát chính xác một góc vật lý bất kể hướng viết, các thuộc tính như border-bottom-left-radius hoặc border-bottom-right-radius sẽ phù hợp hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-end-start-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 *
