Learning Code

Border Properties

Border properties include:
border-style - dotted, dashed, double, groove, inset, none, outset, ridge, solid or none
border-width - thin, medium, thick, or set in px
border-color - hex#, rgb, rgba, or color name
border-top, border-bottom, border-right, and border-left

Border Syntax

For a border to display properly in every browser, you must include values for border-width, border-color, and border-style. Each border property can be written out seperately like this:
p {border-style: dashed; border-width: thin; border-color: white;} - applies a single border style to the entire border
or main {border-right-width: medium; border-right-style: dotted; border-right-color: #000000;} - applies a border only to the border on the right side

More +Less —

Or you can use shorthand and put it together:
section {border: 1px solid #000000;} - includes a value for border-width, border-style, and border-color to make the entire border identical
or aside {border-right: medium grooved cadetblue;} - to set border-width, border-style, and border-color for just 1 side of the border
You can also set each side to a specific style in with just 1 property like the following:
p {border-style: solid dotted solid dashed;} - to set the top, right, bottom, and left sides all to different styles
or p {border-width: 5px 10px;} - to set one size to the top and bottom and a different size to the left and right