HTML table border styles
Posted by jpluimers on 2021/01/20
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:
- [WayBack] w3schools: CSS border-style property
- [WayBack] w3schools: CSS Borders
- [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-styleproperty 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:
noneLike the hiddenkeyword, displays no border. Unless abackground-imageis set, the calculated value ofborder-top-widthwill be0, even if the specified value is something else. In the case of table cell and border collapsing, thenonevalue has the lowest priority: if any other conflicting border is set, it will be displayed.hiddenLike the nonekeyword, displays no border. Unless abackground-imageis set, the calculated value ofborder-top-widthwill be0, even if the specified value is something else. In the case of table cell and border collapsing, thehiddenvalue has the highestpriority: if any other conflicting border is set, it won’t be displayed.dottedDisplays 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.dashedDisplays 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. solidDisplays a single, straight, solid line. doubleDisplays two straight lines that add up to the pixel size defined by border-widthorborder-top-width.grooveDisplays a border with a carved appearance. It is the opposite of ridge.ridgeDisplays a border with an extruded appearance. It is the opposite of groove.insetDisplays a border that makes the element appear embedded. It is the opposite of outset. When applied to a table cell withborder-collapseset tocollapsed, this value behaves likegroove.outsetDisplays a border that makes the element appear embossed. It is the opposite of inset. When applied to a table cell withborder-collapseset tocollapsed, this value behaves likeridge.
–jeroen
The Wiert Corner - irregular stream of stuff 
Leave a comment