This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size.

Smartphone icons created by Freepik - Flaticon

2.3.5 Rounded Borders

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

Normal border

Round border

More rounded border

Most rounded border

Example: The border-radius Property

All CSS Border Properties

Property Description
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius Sets all the four border-*-radius properties for rounded corners
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders

CSS Course Home
Module 2: Colors, Backgrounds and Borders Options

Example files created in this module:
CSS Background Color CSS Text Color CSS Border Color CSS Color Values Specify colors using RGB values Shades of gray Make transparent colors with RGBA Specify colors using HEX values Specify shades of gray using HEX values Specify colors using HSL values HSL Saturation HSL Lightness HSL Shades of gray Make transparent colors with HSLA CSS background-color CSS background-color example! Transparent Boxes part 1 Transparent Boxes part 2 Background Image part 1 Background Image part 2 Background Image part 3 Background Repeat part 1 Background Repeat part 2 Background Repeat part 3 CSS background-position The background-attachment Property part 1 The background-attachment Property part 2 The background Property - shorthand The border-style Property The border-width Property part 1 The border-width Property part 2 The border-color Property part 1 The border-color Property part 2 The border-color Property part 3 The border-color Property part 4 The border-color Property part 5 Individual Border Sides part 1 Individual Border Sides part 2 Individual Border Sides part 3 Border Shorthand part 1 Border Shorthand part 2 Border Shorthand part 3 The border-radius Property