Chapter 13. CSS: Styling Borders and Drawing Lines
Border Style
1 Value
border-style: Original
border-style: None
border-style: Solid
border-style: Dashed
border-style: Dotted
border-style: double
2 Values
border-style: Solid None
border-style: Solid Dashed
3 Values
border-style: Solid None Dotted
4 Values
border-style: Solid Dotted Double None
Border Color
1 Value: Red
2 Values: Red Green
3 Values: Red Green Blue
4 Values: Red Green Blue Yellow
Border Width
Original
Keyword
Length
5px
1rem
1em
100%
1vw
1vh
Multiple Values
2 Values: thin thick
3 Values: thin medium thick
4 Values: 1px 5px 10px 15px
Border Radius
Original
px
%
Multiple Values
2 Values: 50% 10%
3 Values: 50% 30% 10%
4 Values: 10% 20% 30% 50%
Border(Multiple Properties)
All Sides
Original
border: solid
border: solid blue
border: solid 5px
border: blue 5px
border: solid blue 5px
Specific Side
border-top: solid blue 5px
border-right: solid blue 5px
border-bottom: solid blue 5px
border-left: solid blue 5px
Borders on Specific Side
Style
Original
border-top-style:none
border-right-style:none
border-bottom-style:none
border-left-style:none
color
Original
border-top-color:red
border-right-color:red
border-bottom-color:red
border-left-color:red
Width
Original
border-top-width:5px
border-right-width:5px
border-bottom-width:5px
border-left-width:5px
Border Radius on Specific Side
Original
border-top-left-radius:50%
border-top-right-radius:50%
border-bottom-left-radius:50%
border-bottom-right-radius:50%
