CSS - Borders




CSS Borders

The border specifies a space between the padding and content in the box model. The border properties in CSS define the width, color, and style of border area of the box.

The border property can also set the style, width, and color of the border property in one declaration, also known as border shorthand.

In css borders allows you to identify the style, width, and color of an element's border.

The borderproperty is used to apply the individual border values in a single place in the style sheet.

Border can be used to set the values for one or more of: border-width, border-style, border-color.

Types of Border Property

There are three different types of properties in CSS border they are −

  • Border-width.

  • Border-style.

  • Border-color.

Border Width

The border-width property defines the width of the four borders around an element.

The width can be set in a specific size (px, pt, cm, em, etc).

In CSS, We can also use one of the three pre-defined values thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

<!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 4px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

p.three {
    border-style: dotted;
    border-width: 3px;
}

p.four {
    border-style: dotted;
    border-width: thick;
}

p.five {
    border-style: double;
    border-width: 14px;
}

p.six {
    border-style: double;
    border-width: thick;
}

p.seven {
    border-style: solid;
    border-width: 3px 9px 3px 18px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
<p class="four">Some text.</p>
<p class="five">Some text.</p>
<p class="six">Some text.</p>
<p class="seven">Some text.</p>
<p><b>Note</b> − In css borders allows you to identify the style, width, and color of an element's border.</p>
</body>
</html>

Result