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