View video tutorial

CSS Border Radius

CSS

This property is used to set rounded borders.

CSS border-radius property

border-radius property is used to add rounded borders to an element.

Example

.p1 {
  border-style: solid;
  border-radius: 5px;
}
Try it Now »

Click on the "Try it Now" button to see how it works.


Sample Code

Copy each file contents and paste it to your own project and run to see the final output

border-radius: 5px;

Here, top(top-left):5px. right:5px. bottom:5px. left:5px.

border-radius: 5px 10px;

Here, top(top-left):5px. right:10px. bottom:5px. left:10px.

Example

.p1 {
  border-style: solid;
  border-radius: 5px;
}
.p2 {
  border-style: solid;
  border-radius: 5px 10px;
}
Try it Now »

Click on the "Try it Now" button to see how it works.