The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).
Example
Demonstration of the different border styles:
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;}
Result:
No border.
A hidden border.
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:
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 */
}
Note: If border-color is not set, it inherits the color of the element.
Example
Demonstration of the different border colors:
p.one {
border-style: solid;
border-color: red;
}
p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
Result:
Specific Side Colors
The border-color 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-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
HEX Values
Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
RGB Values Or by using RGB values:
Example
p.one {
border-style: solid;
border-color: rgb(255, 0, 0); /* red */
}
HSL Values
You can also use HSL values:
Example
p.one {
border-style: solid;
border-color: hsl(0, 100%, 50%); /* red */
}
Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Result:
The example above gives the same result as this:
Example
p {
border-style: dotted solid;
}
So, here is how it works:
If the border-style property has four values:
If the border-style property has three values:
If the border-style property has two values:
If the border-style property has one value:
Example
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
Example
p {
border: 5px solid red;
}
Result:
You can also specify all the individual border properties for just one side:
Left Border
p {
border-left: 6px solid red;
}
Result:
Bottom Border
p {
border-bottom: 6px solid red;
}
Result
Example
p {
border: 2px solid red;
border-radius: 5px;
}
10 videos|41 docs|23 tests
|
|
Explore Courses for Class 6 exam
|