How to add a rounded border with CSS ?
In this article we will see how we can add a rounded border with CSS. We can add a rounded border with CSS using the border-radius property for the element.
Syntax:
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit
Example 1: In the below example, we are creating a div having class name “GFG” which have round borders.
html
<!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:
Example 2: In this example, we will apply rounded borders to a button element. We are setting the height and width to be same and then setting the border-radius to 50% to get the button completely rounded.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
.btn{
border-radius: 50%;
background: rgb(2, 138, 43);
color: #fff;
padding: 2px;
text-align: center;
width: 75px;
height: 75px;
border: solid 1px transparent;
}
h1 {
color: green;
}
</ style >
</ head >
< body >
< center >
< h1 >GeeksForGeeks</ h1 >
< h2 >
Adding rounded border to a button
</ h2 >
< button class = "btn" >Submit</ button >
</ center >
</ body >
</ html >
|
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Last Updated :
22 Feb, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...