Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set the shape of the border of the top-right corner with JavaScript?
To set the shape of the border of the top-right corner in JavaScript, use the borderTopRightRadius property. This property allows you to create rounded corners by specifying the radius value.
Syntax
element.style.borderTopRightRadius = "value";
The value can be specified in pixels (px), percentages (%), or other CSS units like em or rem.
Example
Here's how to dynamically change the top-right border radius using JavaScript:
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: thick solid gray;
width: 300px;
height: 200px;
padding: 20px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="box">Demo Text</div>
<br><br>
<button type="button" onclick="changeRadius()">Change top right border radius</button>
<button type="button" onclick="resetRadius()">Reset</button>
<script>
function changeRadius() {
document.getElementById("box").style.borderTopRightRadius = "30px";
}
function resetRadius() {
document.getElementById("box").style.borderTopRightRadius = "0px";
}
</script>
</body>
</html>
Different Values
You can use various units and values for the border radius:
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
border: 3px solid #333;
width: 150px;
height: 100px;
margin: 10px;
display: inline-block;
text-align: center;
padding: 10px;
background-color: #e8f4fd;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">10px</div>
<div class="demo-box" id="box2">25px</div>
<div class="demo-box" id="box3">50%</div>
<br><br>
<button onclick="applyRadius()">Apply Different Radius Values</button>
<script>
function applyRadius() {
document.getElementById("box1").style.borderTopRightRadius = "10px";
document.getElementById("box2").style.borderTopRightRadius = "25px";
document.getElementById("box3").style.borderTopRightRadius = "50%";
}
</script>
</body>
</html>
Key Points
- The
borderTopRightRadiusproperty only affects the top-right corner - Values can be in pixels, percentages, or other CSS units
- Use percentage values for responsive rounded corners
- Set to "0" to remove any existing border radius
Conclusion
The borderTopRightRadius property provides an easy way to create rounded top-right corners dynamically. Use different units like pixels or percentages to achieve the desired visual effect.
Updated on: 2026-03-15T23:18:59+05:30
274 Views
Advertisements