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-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
Like this:
Like Loading...
