- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Style borderRadius Property
The HTML DOM borderRadius propert is used to add rounded corners to the element’s four sides. Using this property, we can set and get the border radius properties like borderTopLeftRadius, borderTopRightRadius, borderBottomRightRadius, borderBottomLeftRadius.
Following is the syntax for −
Setting the borderRadius property:
object.style.borderRadius = "1-4 length|% / 1-4 length|%|initial|inherit"
The property values are explained as follows −
| Value | Description |
|---|---|
| length | For defining the borders shape. |
| % | For defining the borders shape in percentage. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the borderRadius property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-radius: 1px 1px 1px 1px;
}
</style>
<script>
function changeBorderRadius(){
document.getElementById("DIV1").style.borderRadius="45px 45px 45px 45px";
document.getElementById("Sample").innerHTML="The border radius for the four borders of the above div are now increased";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Increase the above div border radius size by clicking the below button</p>
<button onclick="changeBorderRadius()">Change Border Radius</button>
<p id="Sample"></p>
</body>
</html>Output
On clicking the “Change Border Radius” button −
Updated on: 22-Oct-2019
128 Views
Advertisements