Thuộc tính border-bottom-left-radius trong CSS
Bùi Tấn Lực - 850
- 06/10/2025
Chức năng của Thuộc tính border-bottom-left-radius trong CSS
Thuộc tính border-bottom-left-radius trong CSS 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-bottom-left-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-bottom-left-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-bottom-left-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-bottom-left-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-bottom-left-radius trong CSS
border-bottom-left-radius: 25px; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 25px)
border-bottom-left-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-bottom-left-radius: 20%; (Bo tròn góc trái dưới theo tỷ lệ %: 20%)
border-bottom-left-radius: 1em; (Bo tròn góc trái dưới theo chiều ngang và chiều dọc đều 1em)
border-bottom-left-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-bottom-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-bottom-left-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-bottom-left-radius: 25px;">border-bottom-left-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-bottom-left-radius: 50px 15px;">border-bottom-left-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-bottom-left-radius: 20%;">border-bottom-left-radius: 20%; (Bo tròn góc trái dưới theo tỷ lệ %: 20%)</div>
<div style="border-bottom-left-radius: 1em;">border-bottom-left-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-bottom-left-radius: 3em 1em;">border-bottom-left-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-bottom-left-radius trong thiết kế giao diện CSS
Thuộc tính border-bottom-left-radius hữu ích khi cần bo tròn riêng góc dưới bên trái mà không làm thay đổi ba góc còn lại. Cách sử dụng này phù hợp với nhiều thành phần giao diện, đặc biệt khi thiết kế các khối có hình dáng không đối xứng hoặc cần tạo điểm nhấn cho bố cục.
Bo tròn góc riêng cho khối nội dung
Với các khối nội dung như hộp thông báo, thẻ thông tin hoặc khu vực chứa văn bản, bạn có thể chỉ bo góc dưới bên trái để tạo hình dạng khác biệt. Thuộc tính này hoạt động độc lập nên không ảnh hưởng đến bán kính của những góc khác.
Ví dụ, đoạn mã dưới đây tạo một khối có góc dưới bên trái được bo tròn:
<div class="box">Nội dung cần hiển thị</div>
Tạo kiểu nút và thành phần giao diện
border-bottom-left-radius có thể được dùng để tạo kiểu riêng cho nút bấm, nhãn, thẻ hoặc các thành phần tương tác. Khi kết hợp với màu nền, đường viền và kích thước phù hợp, một góc bo riêng có thể giúp giao diện trở nên mềm mại và dễ nhận diện hơn.
Cách này đặc biệt phù hợp với những thiết kế không sử dụng kiểu bo tròn đồng đều ở cả bốn góc. Chỉ cần thay đổi giá trị bán kính, bạn có thể điều chỉnh độ cong từ nhẹ đến rõ rệt.
Kết hợp với các thuộc tính border-radius khác
Thuộc tính này cũng có thể kết hợp với border-radius và các thuộc tính bo góc riêng khác để tạo hình dạng linh hoạt. Trong trường hợp cần kiểm soát từng góc, nên xác định rõ giá trị cho mỗi góc thay vì áp dụng một bán kính chung.
Ví dụ sau tạo các góc có độ bo khác nhau:
<div class="card">Thẻ nội dung</div>
Cách kết hợp này giúp kiểm soát chính xác hình dạng của từng thành phần, đồng thời tạo sự khác biệt mà không cần thêm phần tử HTML hoặc kỹ thuật CSS phức tạp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-bottom-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 *
