CSS | Border

⌚ CSS3 Essentials  
Border

1. Outer edge of the padding and inner edge of margin.
2. Default border size is zero and invisible.
3. Border properties/Border longhand
1. <border-width> | <border-style> | <border-color> 
4. Border shorthand: 
1. Syntax: border: border-width border-style border-color   ;
2. Example: .disk { border: 3x solid blue; }
5. Border longhand 
1. Border shorthand + {keyword}
1. <border-top> | <border-right> | <border-bottom> | <border-left>
2. <border-width> | <border-style> | <border-color> 
2. Border shorthand + {keyword} + {keyword}
1. <border-top-width> | <border-top-style> | <border-top-color> | <border-left-width> | ...
6.  Border radius
1. border-radius: top right bottom left;
2. Example: 
1. border-radius: 20px;
2. border-radius: 20px 30px;
3. border-radius: 20px 30px 40px;
4. border-radius: 20px 30px 40px 50px;
3. Border radius longhand options
1. <border-top-left-radius> | <border-top-right-radius> | <border-bottom-left-radius> | <border-bottom-right-radius>
7.  Create elliptical corners
1. div { border-radius: 10px / 20px; }
2. div { border-radius: 10px 20px / 30px 40px; }
8. Border Image
1. Require when complex design for border not like solid color.
2. Background image is the bottom image.
3. Properties
1. <border-image-source>
2. <border-image-slice>
3. <border-image-repeat>
9. Ref:
   1. https://developer.mozilla.org