CSS border Property

CSS's border property is used to style an element's border. This property is a combination of three other properties: border-width, border-style, and border-color, and can be used as a shorthand notation for these three. It sets or returns the properties border-width, border-style, and border-color.

Syntax

border: border-width | border-style | border-color | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .ex1 {
        border: 2px solid #ff4842;
    }
    .ex2 {
        border: 4px dotted #00ab55;
    }
    .ex3 {
        border: double  #ffc107;
    }
</style>
</head>
<body>

<div class="ex1">border:solid</div><br>
<div class="ex2">border:dotted</div><br>
<div class="ex3">border:double</div>

</body>
</html>

Preview

Property Values

Value	Description
border-width	The width of the border is specified. The default setting is "medium."
border-style	The border style is specified here. The default value is "none."
border-color	The color of the border is specified here. The color of the text is the default value.
initial	This property is set to its default value.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
border	1.0	1.0	1.0	4.0	3.5

background-size

border-bottom

CSS border Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us