CSS Rounded Borders

The CSS border properties allow you to determine the style, width, and color of an element’s border.

The CSS border is a shorthand property used to set the border on an element.

CSS Rounded Borders

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

The border-radius Property

This property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
  border: 2px solid red;
}

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

p.round2 {
  border: 2px solid red;
  border-radius: 8px;
}

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}
</style>
</head>
<body>

<h2>The border-radius Property</h2>
<p>This property is used to add rounded borders to an element:</p>

<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>

</body>
</html>


All CSS Border Properties

PropertyDescription
borderSets all the border properties in one declaration
border-bottomSets all the bottom border properties in one declaration
border-bottom-colorSets the color of the bottom border
border-bottom-styleSets the style of the bottom border
border-bottom-widthSets the width of the bottom border
border-colorSets the color of the four borders
border-leftSets all the left border properties in one declaration
border-left-colorSets the color of the left border
border-left-styleSets the style of the left border
border-left-widthSets the width of the left border
border-radiusSets all the four border-*-radius properties for rounded corners
border-rightSets all the right border properties in one declaration
border-right-colorSets the color of the right border
border-right-styleSets the style of the right border
border-right-widthSets the width of the right border
border-styleSets the style of the four borders
border-topSets all the top border properties in one declaration
border-top-colorSets the color of the top border
border-top-styleSets the style of the top border
border-top-widthSets the width of the top border
border-widthSets the width of the four borders

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your projects with us.


0 Comments

Leave a Reply

Avatar placeholder