Thuộc tính border-top-left-radius trong CSS
Bùi Tấn Lực - 838
- 07/10/2025
Chức năng của Thuộc tính border-top-left-radius trong CSS
Thuộc tính border-top-left-radius trong CSS 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-top-left-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-top-left-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-top-left-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-top-left-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-top-left-radius trong CSS
border-top-left-radius: 25px; (Bo tròn góc trái trên theo chiều ngang và chiều dọc đều 25px)
border-top-left-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-top-left-radius: 20%; (Bo tròn góc trái trên theo tỷ lệ %: 20%)
border-top-left-radius: 1em; (Bo tròn góc trái trên theo chiều ngang và chiều dọc đều 1em)
border-top-left-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-top-left-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-top-left-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-top-left-radius: 25px;">border-top-left-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-top-left-radius: 50px 15px;">border-top-left-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-top-left-radius: 20%;">border-top-left-radius: 20%; (Bo tròn góc trái trên theo tỷ lệ %: 20%)</div>
<div style="border-top-left-radius: 1em;">border-top-left-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-top-left-radius: 3em 1em;">border-top-left-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>
Ứng dụng border-top-left-radius trong thiết kế giao diện
border-top-left-radius phù hợp khi cần bo tròn riêng góc trên bên trái thay vì áp dụng cùng một kiểu bo cho toàn bộ phần tử. Cách dùng này giúp tạo điểm nhấn cho thẻ nội dung, hộp thông tin, nút hoặc các thành phần giao diện có hình dạng không đối xứng.
Tạo góc bo riêng cho thẻ và khối nội dung
Trong giao diện thực tế, không phải mọi khối đều cần bo tròn bốn góc. Chỉ bo góc trên bên trái có thể tạo cảm giác mềm mại nhưng vẫn giữ được đường nét đặc trưng của thành phần. Đặc biệt, cách này hữu ích với các thẻ có phần tiêu đề, nhãn hoặc vùng nội dung cần tạo điểm nhận diện.
Ví dụ, có thể tạo một khối với góc trên bên trái được bo tròn như sau:
.box {
border-top-left-radius: 20px;
}
Giá trị càng lớn thì mức độ bo góc càng rõ. Nên chọn kích thước phù hợp với tổng thể giao diện để góc bo không trở thành chi tiết quá nổi bật so với nội dung.
Kết hợp border-top-left-radius với các thuộc tính border-radius khác
border-top-left-radius có thể sử dụng độc lập hoặc kết hợp với các thuộc tính bo góc còn lại. Cách kết hợp này cho phép kiểm soát từng góc và tạo ra nhiều kiểu hình dạng khác nhau mà không cần thêm phần tử HTML.
Chẳng hạn, khi chỉ muốn góc trên bên trái và góc dưới bên phải được bo tròn, có thể viết:
.box {
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
Với những giao diện cần kiểm soát cả bốn góc, border-radius thường thuận tiện hơn. Ngược lại, khi chỉ một góc cần thay đổi, border-top-left-radius giúp quy tắc CSS rõ ràng và dễ điều chỉnh.
Những lưu ý khi sử dụng border-top-left-radius trong responsive
Khi thiết kế responsive, kích thước phần tử có thể thay đổi theo chiều rộng màn hình. Vì vậy, giá trị bo góc cần được cân nhắc để không làm mất cân đối khi giao diện chuyển từ máy tính sang thiết bị di động.
Với các khối có kích thước thay đổi linh hoạt, nên ưu tiên giá trị phù hợp với tỷ lệ của thành phần thay vì đặt một mức bo quá lớn. Đồng thời, cần kiểm tra trên nhiều kích thước màn hình để bảo đảm góc bo vẫn hiển thị đúng và không ảnh hưởng đến 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-top-left-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 *
