CSS Border Width

CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
This tutorial will teach you CSS from basic to advanced.
Post Reply
Guest

CSS Border Width

Post by Guest »

CSS Border Width


CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using
one of the three pre-defined values: thin, medium, or thick:

Example
Demonstration of the different border widths:

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;
}

Result:

5px border-width
medium border-width
2px border-width
thick border-width

Try it Yourself »


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

Example

p.one {  border-style: solid;  border-width: 5px 20px; /*
5px top and bottom, 20px on the sides */}p.two {  border-style:
solid;  border-width: 20px 5px; /* 20px top and bottom, 5px on the
sides */}
p.three {  border-style: solid;  border-width: 25px 10px
4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */}
Try it Yourself »














+1

Reference: https://www.w3schools.com/css/css_border_width.asp
Post Reply