Thuộc tính border-top-right-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-right-radius trong CSS
Thuộc tính border-top-right-radius trong CSS thường dùng để bo tròn góc phả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-right-radius trong CSS
Áp dụng cho giá trị có đơn vị là px, em,... không phải %
border-top-right-radius: giatri;
giatri: Giá trị này dùng để bo tròn góc phả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-right-radius: giatri1 giatri2;
giatri1: Giá trị 1 dùng để bo tròn góc phải trên theo chiều ngang.
giatri2: Giá trị 2 dùng để bo tròn góc phải trên theo chiều dọc.
Áp dụng cho giá trị có đơn vị là %
border-top-right-radius: sophantram;
sophantram: Số phần trăm (Ví dụ 20%) dùng để bo tròn góc phải trên theo tỷ lệ %.
Code Thuộc tính border-top-right-radius trong CSS
border-top-right-radius: 25px; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 25px)
border-top-right-radius: 50px 15px; (Bo tròn góc phải trên theo chiều ngang 50px, Bo tròn góc phải trên theo chiều dọc 15px)
border-top-right-radius: 20%; (Bo tròn góc phải trên theo tỷ lệ %: 20%)
border-top-right-radius: 1em; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 1em)
border-top-right-radius: 3em 1em; (Bo tròn góc phải trên theo chiều ngang 3em, Bo tròn góc phải trên theo chiều dọc 1em)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính border-top-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-top-right-radius trong CSS</h1>
<p>Dùng để bo tròn góc phải trên của phần tử HTML, đơn vị thường dùng là px, %, em,....:</p>
<div style="border-top-right-radius: 25px;">border-top-right-radius: 25px; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 25px)</div>
<div style="border-top-right-radius: 50px 15px;">border-top-right-radius: 50px 15px; (Bo tròn góc phải trên theo chiều ngang 50px, Bo tròn góc phải trên theo chiều dọc 15px)</div>
<div style="border-top-right-radius: 20%;">border-top-right-radius: 20%; (Bo tròn góc phải trên theo tỷ lệ %: 20%)</div>
<div style="border-top-right-radius: 1em;">border-top-right-radius: 1em; (Bo tròn góc phải trên theo chiều ngang và chiều dọc đều 1em)</div>
<div style="border-top-right-radius: 3em 1em;">border-top-right-radius: 3em 1em; (Bo tròn góc phải trên theo chiều ngang 3em, Bo tròn góc phải trên theo chiều dọc 1em)</div>
</body>
</html>
Cách kết hợp border-top-right-radius với các thuộc tính CSS khác
border-top-right-radius phát huy hiệu quả tốt hơn khi được sử dụng cùng các thuộc tính như border, background và overflow. Cách kết hợp phù hợp giúp góc trên bên phải được bo chính xác mà không làm mất đi bố cục hoặc hiệu ứng hiển thị của phần tử.
Ứng dụng border-top-right-radius trong thiết kế giao diện thực tế
Trong giao diện thực tế, thuộc tính này có thể dùng để tạo điểm nhấn cho một góc của thẻ nội dung, hộp thông tin, nút bấm hoặc khối hình ảnh. Thay vì bo tròn toàn bộ phần tử, chỉ cần tác động vào góc trên bên phải để tạo kiểu dáng riêng và phù hợp với thiết kế.
Ví dụ, một hộp thông tin có thể kết hợp border-top-right-radius với đường viền và màu nền như sau:
.box {
border: 2px solid #333;
border-top-right-radius: 30px;
background: #f5f5f5;
}
Nếu phần tử có nội dung hoặc hình ảnh nằm sát các cạnh, có thể kết hợp thêm overflow: hidden để phần nội dung bên trong không vượt ra ngoài vùng góc đã bo. Cách này đặc biệt hữu ích khi thiết kế thẻ chứa hình ảnh, banner hoặc các khối giao diện có nền màu.
Điểm quan trọng là không nên lạm dụng giá trị bo góc. Bán kính cần cân đối với kích thước phần tử để góc bo tạo cảm giác rõ ràng nhưng vẫn giữ được sự hài hòa của toàn bộ giao diện.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính border-top-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 *
