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