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 all the four border radius properties at once with JavaScript?
In JavaScript, you can set all four border-radius properties at once using the borderRadius property. This property allows you to apply rounded corners to an element by setting a single value or multiple values for different corners.
Syntax
The borderRadius property can accept different formats:
element.style.borderRadius = "10px"; // All corners element.style.borderRadius = "10px 20px"; // top-left/bottom-right, top-right/bottom-left element.style.borderRadius = "10px 20px 30px"; // top-left, top-right/bottom-left, bottom-right element.style.borderRadius = "10px 20px 30px 40px"; // top-left, top-right, bottom-right, bottom-left
Example: Setting Uniform Border Radius
<!DOCTYPE html>
<html>
<head>
<style>
#box {
border: 3px solid #333;
width: 200px;
height: 100px;
background-color: #f0f0f0;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="box">Demo Box</div>
<br><br>
<button onclick="addBorderRadius()">Add Border Radius</button>
<script>
function addBorderRadius() {
document.getElementById("box").style.borderRadius = "20px";
}
</script>
</body>
</html>
Example: Setting Different Corner Values
<!DOCTYPE html>
<html>
<head>
<style>
.demo-box {
border: 2px solid #007acc;
width: 150px;
height: 80px;
background-color: #e6f3ff;
margin: 10px;
text-align: center;
line-height: 80px;
display: inline-block;
}
</style>
</head>
<body>
<div class="demo-box" id="box1">Box 1</div>
<div class="demo-box" id="box2">Box 2</div>
<div class="demo-box" id="box3">Box 3</div>
<br><br>
<button onclick="applyDifferentRadius()">Apply Different Border Radius</button>
<script>
function applyDifferentRadius() {
document.getElementById("box1").style.borderRadius = "15px";
document.getElementById("box2").style.borderRadius = "10px 30px";
document.getElementById("box3").style.borderRadius = "5px 15px 25px 35px";
}
</script>
</body>
</html>
Individual Corner Properties
You can also set individual corners using specific properties:
<!DOCTYPE html>
<html>
<head>
<style>
#individual-box {
border: 2px solid #ff6b6b;
width: 200px;
height: 100px;
background-color: #ffebee;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div id="individual-box">Individual Corners</div>
<br><br>
<button onclick="setIndividualCorners()">Set Individual Corners</button>
<script>
function setIndividualCorners() {
let box = document.getElementById("individual-box").style;
box.borderTopLeftRadius = "30px";
box.borderTopRightRadius = "10px";
box.borderBottomLeftRadius = "5px";
box.borderBottomRightRadius = "25px";
}
</script>
</body>
</html>
Common Use Cases
Border radius is commonly used for creating:
- Rounded buttons: Using uniform radius like "8px"
- Circular elements: Setting radius to 50% for perfect circles
- Card designs: Using moderate radius like "12px" for modern UI
- Custom shapes: Using different corner values for unique designs
Conclusion
The borderRadius property provides a convenient way to set rounded corners on elements. You can use a single value for uniform corners or multiple values for custom corner designs, making it versatile for various UI requirements.
Updated on: 2026-03-15T23:18:59+05:30
221 Views
Advertisements