xxxxxxxxxx
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;
}
xxxxxxxxxx
border: 3px solid #3d3d3d
/* top | right | bottom | left */
border-width: 0 0 3px 3px
/*simulair to: */
border-left: 3px solid #3d3d3d
border-bottom: 3px solid #3d3d3d
xxxxxxxxxx
#some-div {
/* [WIDTH] [FILL MODE] [COLOR] */
border: 5px solid #f00;
/* draws solid a red line of 5px
between the padding (inside the div)
and the margin (outside the div) */
}
xxxxxxxxxx
You can not set Border Width in the Percentage its the rule
But you can able to do this just by wrapping into a new div
and in most of the cases you did not need that
xxxxxxxxxx
The CSS box-sizing property allows us to include the padding and border in an
element's total width and height.
*{
box-sizing:border-box:
}
--Suppose you have a class in html and inside this you have different element
with width and height element but whenever you change height or width of inside
class element you will notice there will overflow ,so there we use box-sizing
to prevent overflow from class or parent element.