CSS border-radius property
➔ border-radius property is used to add rounded borders to an element.
Syntax
border-radius: length|%|initial|inherit;
Property values
| Common Value | Description |
|---|---|
| length | Specifies the shape of the corners. |
| percentage | Specifies the shape of the corners. |
| initial | Sets the property to its default value. |
| inherit | The element inherits the property value from its parent element. |
Click on the "Try it Now" button to see how it works.
CSS border-radius property
border-radius: 5px;
Here, top(top-left):5px.
right(top-right):5px.
bottom(bottom-right):5px.
left(bottom-left):5px.
border-radius: 5px 10px;
Here, top(top-left):5px.
right(top-right):10px.
bottom(bottom-right):5px.
left(bottom-left):10px.
Example
.p1 {
border-style: solid;
border-radius: 5px;
}
.p2 {
border-style: solid;
border-radius: 5px 10px;
}Click on the "Try it Now" button to see how it works.
Other Syntax
border-radius: length|% / length|%|initial|inherit;
CSS border-radius property
Example: border-radius: 20px 2rem 2rem 10px / 10px 5px 5px 2rem;
Syntax: border-radius: a b c d / e f g h;
CSS border-radius property
Example: border-radius: 25% 25% 25% 25% / 25% 25% 25% 25%;
Is the same as :border-radius: 25%;
Syntax: border-radius: a b c d / e f g h;
CSS border-radius property
Example: border-radius: 2em 1em 4em / 0.5em 3em;
Is the same as :
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
Syntax: border-radius: a b c d / e f g h;
CSS border-radius property
Example: border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
Syntax: border-radius: a b c d / e f g h;