The border property creates an outline around the edge of an element. Borders are useful for visually containing or separating content. This property comes with three separate characteristics to manipulate: style, width, and color. Click through the tabs below to learn more about border properties and their values.
The border-style property determines the consistency of the border and needs to be defined for a border to show at all. There are multiple styles to choose from.
solid
border-style:solid;
dotted
border-style:dotted;
dashed
border-style:dashed;
double
border-style: double;
The border-width property controls the thickness of the border lines. This can be set using a pixel measurement or one of the keywords “thin”, “medium.” or “thick.”
thin
medium
thick
<div style="border-style: solid; border-width: thin;"></div>
<div style="border-style: solid; border-width: medium;"></div>
<div style="border-style: solid; border-width: thick;"></div>
Finally, border-color will establish your border's coloration. This property is set the same way as other color-based properties--choosing a color with Hex, RGB, HSL, or color words.
border-color: #222E50;
border-color: rgb(98, 68, 197);
border-color: hsl(337, 93%, 44%);
border-color: orange;
Instead of listing each sub-property, they can be combined into one line using the shorthand border property. The proper syntax for the border property value is:
<div style="border: border-width border-style border-color;"></div>
If you want your border to be a solid line with 3px thickness and colored green, you put them all together, separated by spaces.
<div style="border: 3px solid green;"></div>
Like with padding and margin, your border properties can be set to all sides or individual sides.
all
top
bottom
left
right
multiple
<div style="border: 3px solid green;"></div>
<div style="border-top: 3px solid green;"></div>
<div style="border-bottom: 3px solid green;"></div>
<div style="border-left: 3px solid green;"></div>
<div style="border-right: 3px solid green;"></div>
<div style="border: 3px solid green; border-left: 6px dotted #222E50;"></div>
You Try!
Using your own text editor or the coding space below, try using the various border properties on a div tag that contains some simple text elements. Practice each property individually and then give the shorthand version a shot.
