Bùi Tấn Lực - 114
- 07/10/2025
Bùi Tấn Lực 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, chi tiết như nào hãy cùng chúng tôi phân tích:
Thuộc tính border-top-right-radius trong CSS
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>
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 *
