HTML table border styles

I always get confused when I see this kind of HTML:

<td style="border: 1px black; border-style: none solid solid;">

This raises questions like:

• When less than 4 borders are mentioned, which borders are solid, and which borders are none?
• What is the order of 0…4 borders?

Luckily these links helped me:

1. [WayBack] w3schools: CSS border-style property
2. [WayBack] w3schools: CSS Borders
3. [WayBack] border-style – CSS: Cascading Style Sheets | MDNThe border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.

The first two made me find the last one, which is best as it has a CSS demo button (that also works on the WayBack link), a list of examples, and even better, answers the above questions with the “border-style” list below.

I rephrased their list into a table emphasising the clock-wise order:

The number of values determine the sides affected; thinking clock-wise is easiest to get it:

# values	affected sides	example	top	right	bottom	left
1	all: top, right, bottom, left	solid	solid	solid	solid	solid
2	top & bottom, right & left	none solid	none	solid	none	solid
3	top, right & left, bttom	dotted none solid	dotted	none	solid	none
4	top, right, bottom, left	double dotted solid none	double	dotted	solid	none

Their list:

The border-style property may be specified using one, two, three, or four values.

• When one value is specified, it applies the same style to all four sides.
• When two values are specified, the first style applies to the top and bottom, the second to the left and right.
• When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
• When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).

Each value is a keyword chosen from the list below.

then it continues with a table showing the outcome of the various line style values you can put in:

<line-style>

Describes the style of the border. It can have the following values:

none		Like the hidden keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
hidden		Like the none keyword, displays no border. Unless a background-image is set, the calculated value of border-top-width will be 0, even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highestpriority: if any other conflicting border is set, it won’t be displayed.
dotted		Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width.
dashed		Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid		Displays a single, straight, solid line.
double		Displays two straight lines that add up to the pixel size defined by border-width or border-top-width.
groove		Displays a border with a carved appearance. It is the opposite of ridge.
ridge		Displays a border with an extruded appearance. It is the opposite of groove.
inset		Displays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset		Displays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

–jeroen