Thuộc tính border-top-right-radius trong CSS dùng để xác định bán kính góc trên bên phải của phần tử. border-top-right-radius vẽ một góc tròn ở phía trên bên phải của vùng chứa. border-radius dùng để đặt tất cả các góc của vùng chứa cùng một giá trị bán kính. border-top-right-radius đặc biệt đặt góc trên bên phải.
Syntax:
border-top-right-radius:length|[value%]|initial|inherit;
Default Value: Giá trị mặc định của thuộc tính này là 0.
Property Value: Các giá trị thuộc tính border-top-right-radius được liệt kê dưới đây:
- length: Nó được sử dụng để chỉ định bán kính góc trên bên phải với độ dài cố định bằng px, em,... Giá trị mặc định là 0.
- percentage %: Thuộc tính này dùng để xác định bán kính góc trên bên phải bằng phần trăm.
- initial: Nó được dùng để thiết lập thuộc tính
border-top-right-radiusvề giá trị mặc định. - inherit: Thuộc tính này được kế thừa từ phần tử cha của nó.
Example: Trong ví dụ này, chúng ta sẽ sử dụng thuộc tính đã giải thích ở trên.
html<!DOCTYPE html>
<html>
<head>
<title>
border-top-right-radius property
</title>
<style>
#length {
border-color: green;
border-style: solid;
border-top-right-radius: 20px;
}
#percentage {
border-color: green;
border-style: solid;
border-top-right-radius: 59%;
}
#inherit {
border-color: green;
border-style: solid;
border-top-right-radius: inherit;
}
</style>
</head>
<body style="text-align:center">
<h1>GeeksforGeeks</h1>
<h3>border-top-right-radius property</h3>
<div id="length">
border-top-right-radius: length;
</div><br>
<div id="percentage">
border-top-right-radius: percentage;
</div><br>
<div id="inherit">
border-top-right-radius: inherit;
</div>
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính border-top-right-radius được liệt kê dưới đây:
- Google Chrome 4.0 trở lên
- Edge 12.0 trở lên
- Internet Explorer 9.0 trở lên
- Firefox 4.0 trở lên
- Safari 5.0 trở lên
- Opera 10.5 trở lên