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
Please Login to comment...