CSS Rounded Borders

CSS Rounded Borders

border-radius The property is used to add rounded borders to elements:

Normal border

Rounded border

Rounded border

Rounded border

Example

p {
  border: 2px solid red;
  border-radius: 5px;
}

Try it yourself

More examples

All top border properties in a single declaration
This example demonstrates the shorthand property, which is used to set all the top border properties in a single declaration.
Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the width of the left border
This example demonstrates how to set the width of the left border.
Set the color of all four borders
This example demonstrates how to set the color of all four borders. It can have one to four colors.
Set the color of the right border
This example demonstrates how to set the color of the right border.

All CSS Border Properties

Attribute Description
border Shorthand property, sets all border properties in one declaration.
border-color Shorthand property, sets the color of all four borders.
border-radius Shorthand property, can set all four border-radius properties of a circle.
border-style Shorthand property, sets the style of all four borders.
border-width Shorthand property, sets the width of all four borders.
border-bottom Shorthand property, sets all bottom border properties in one declaration.
border-bottom-color Set the color of the bottom border.
border-bottom-style Set the style of the bottom border.
border-bottom-width Set the width of the bottom border.
border-left Shorthand property, sets all left border properties in one declaration.
border-left-color Set the color of the left border.
border-left-style Set the style of the left border.
border-left-width Set the width of the left border.
border-right Shorthand property, sets all right border properties in one declaration.
border-right-color Set the color of the right border.
border-right-style Set the style of the right border.
border-right-width Set the width of the right border.
border-top Shorthand property, sets all top border properties in one declaration.
border-top-color Set the color of the top border.
border-top-style Set the style of the top border.
border-top-width Set the width of the top border.