How to add a rounded border with CSS ?
The purpose of this article is to add a rounded border to a HTML element by using the border-radius property in CSS. It is used to round the corner of an element. The property sets the border-radius for the element.
Syntax:
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit
Example:
<!DOCTYPE html><html> <head> <style> .GFG { border-radius: 75px 75px; background: blue; padding: 16px; text-align: center; width: 300px; height: 120px; } </style></head> <body> <center> <h1> GeeksForGeeks </h1> <h2> How to add a rounded border with css ? </h2> <div class="GFG"> <h4> Rounded corners Borders </h4> </div> </center></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
.png)