Border Width
Syntax: border-width: medium|thin|thick|length|initial|inherit;
Thin
Medium
Thick
Length
Border Style
Syntax: border-style:none|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
Border Color
Syntax: border-color: color|transparent|initial|inherit;
Red
Green
Multi name
Multi Hex
Border Shorthand
Syntax: border: border-width border-style border-color;
border: 5px dotted green
Individual Borders
Top
border-top-width: medium;
border-top-style: dotted;
border-top-color: red;
Right
border-right-width: 10px;
border-right-style: solid;
border-right-color: yellow;
Bottom
border-bottom-width: 5px;
border-bottom-style: dashed;
border-bottom-color: #000000;
Left
border-left-width: thick;
border-left-style: ridge;
border-left-color: pink;
Individual Border Shorthand
Top
border-top: medium dotted red;
Right
border-right: 10px solid yellow;
Bottom
border-bottom: 5px dashed #000000;
Left
border-left: thick ridge pink;
Border Radius
Syntax: border-top-left-radius: length|initial|inherit
border-top-left-radius: 30px;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 0;
border-top-left-radius: 50%;
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
border-top-left-radius: 50%;
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
(Square Module)
border-top-right-radius: 0;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 0;
(Square Module)
Border Radius Shorthand
Syntax: border-radius: 1-4 length|initial|inherit
Four Values
border-radius: 30px 0 30px 0;
border-radius: 30px 0 30px 0;
Three Values
border-radius: 30px 0 30px;
border-radius: 30px 0 30px;
Two Values
border-radius: 30px 0;
border-radius: 30px 0;
One Value
border-radius: 30px;
border-radius: 30px;
Outline Color
Syntax: outline-color: invert|color|initial|inherit;
Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
Outline Style
Syntax: outline-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
Outline Width
Syntax: outline-width: medium|thin|thick|length|initial|inherit;
Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
Outline Offset
Syntax: outline-offset: length|initial|inherit;
Sed porttitor lectus nibh. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada. Donec rutrum congue leo eget malesuada. Donec sollicitudin molestie malesuada.
Outline Shorthand
Syntax: outline: outline-color outline-style outline-width|initial|inherit;
outline: 5px dashed blue;
outline-offset: 5px;
outline-offset: 5px;
Note: The outline offset property is not included in the outline shorthand and must be declared separately