CSS Border

CSS Border

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

The CSS border properties are use to specify the style, color and size of the border of an element. The CSS border properties are given below:

1. border-style

2. border-color

3. border-width

1) CSS border-style

The Border style property is used to specify the border type which you want to display on the web page.

There are some border style values which are used with border-style property to define a border.

Value Description
none It doesn't define any border.
dotted It is used to define a dotted border.
dashed It is used to define a dashed border.
solid It is used to define a solid border.
double It defines two borders wIth the same border-width value.
groove It defines a 3d grooved border. effect is generated according to border-color value.
ridge It defines a 3d ridged border. effect is generated according to border-color value.
inset It defines a 3d inset border. effect is generated according to border-color value.
outset It defines a 3d outset border. effect is generated according to border-color value.

The border-style 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.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Try it with the Editor

2) CSS border-width

The border-width property is used to set the border's width. It is set in pixels. You can also use the one of the three pre-defined values, thin, medium or thick to set the width of the border.

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-width: 5px;
}
p.two {
    border-style: solid;
    border-width: medium;
}
p.three {
    border-style: dotted;
    border-width: 2px;
}
p.four {
    border-style: dotted;
    border-width: thick;
}
p.five {
    border-style: double;
    border-width: 15px;
}
p.six {
    border-style: double;
    border-width: thick;
}
p.seven {
    border-style: solid;
    border-width: 2px 10px 4px 20px;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p class="one">>This is Paragraph.</p>
<p class="two">>This is Paragraph.</p>
<p class="three">>This is Paragraph.</p>
<p class="four">>This is Paragraph.</p>
<p class="five">>This is Paragraph.</p>
<p class="six">>This is Paragraph.</p>
<p class="seven">>This is Paragraph.</p>
</body>
</html>
Try it with the Editor

Note: The "border-width" property does not work if it is used alone. Always specify the "border-style" property to set the borders first.

3) CSS border-color

There are three methods to set the color of the border.

You can individually change the color of the bottom, left, top and right sides of an element's border using the properties:−

Example:

    <!DOCTYPE html>
<html>
<head>
<style>
p.one {
    border-style: solid;
    border-color: red;
}
p.two {
    border-style: solid;
    border-color: green;
} 
p.three {
    border-style: solid;
    border-color: red green blue yellow;
} 
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p class="one">>A solid red border.</p>
<p class="two">>A solid green border.</p>
<p class="three">>A solid multicolor border.</p>
</body>
</html>
Try it with the Editor

Note: The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.