none border-style: none | hidden border-style: hidden | solid border-style: solid | dotted border-style: dotted |
dashed border-style: dashed | double border-style: double | groove border-style: groove | ridge border-style: ridge |
inset border-style: inset | outset border-style: outset |
dotted, 100% border: 10px dotted; width: 100% | dotted, 85% border: 10px dotted; width: 85% | dotted, 70% border: 10px dotted; width: 70% | dotted, 55% border: 10px dotted; width: 55% |
dashed, 100% border: 10px dashed; width: 100% | dashed, 85% border: 10px dashed; width: 85% | dashed, 70% border: 10px dashed; width: 70% | dashed, 55% border: 10px dashed; width: 55% |
inset, black border: 16px inset #000 | outset, black border: 16px outset #000 | groove, black border: 16px groove #000 | ridge, black border: 16px ridge #000 |
inset, near-white border: 16px inset #f0f0f0; background: #888 | outset, near-white border: 16px outset #f0f0f0; background: #888 | groove, near-white border: 16px groove #f0f0f0; background: #888 | ridge, white border: 16px ridge #fff; background: #888 |
no color, color: red border: 16px inset; color: #d94a4a; background: #888 | no color, color: black border: 16px inset; color: #000; background: #888 | no color, color: white border: 16px inset; color: #fff; background: #888 | declared #808080 border: 16px inset #808080; background: #888 |
outset, no color border: 16px outset; color: #d94a4a; background: #888 | groove, no color border: 16px groove; color: #d94a4a; background: #888 | table is exempt table, border: 16px inset; color: #d94a4a | outline is not substituted outline: 16px inset; color: #d94a4a; background: #888; margin: 16px |
1px 2px 4px 8px 16px dotted | 1px 2px 4px 8px 16px dashed | 1px 2px 4px 8px 16px double | 1px 2px 4px 8px 16px groove |
mixed widths border: solid #4a90d9; border-width: 4px 24px 12px 8px | mixed colors border: 16px solid; border-color: #d94a4a #4ad98a #4a90d9 #d9c74a | mixed styles border: 14px #4a90d9; border-style: solid dashed double dotted | mixed everything border-color: #d94a4a #4ad98a #4a90d9 #d9c74a; border-style: double solid groove dashed; border-width: 18px 6px 14px 10px |
inset collapse / separate, border: 12px inset | outset collapse / separate, border: 12px outset | groove collapse / separate, border: 12px groove | ridge collapse / separate, border: 12px ridge |
equal: rows take all but the first row line collapse, rows 12px solid / columns 12px solid | double columns outrank solid rows, and take every crossing collapse, rows 12px solid / columns 12px double | inset collapse, rows 12px inset / columns 12px inset | outset collapse, rows 12px outset / columns 12px outset |
inset hr / div, border: 4px inset #808080 | outset hr / div, border: 4px outset #808080 | groove hr / div, border: 6px groove #808080 | ridge hr / div, border: 6px ridge #808080 |
double hr / div, border: 6px double #4a90d9 | dashed hr / div, border: 3px dashed #d94a4a | dotted hr / div, border: 3px dotted #4ad98a | solid hr / div, border: 2px solid #4a90d9 |
inset, as the UA sheet leaves it hr / div, border-style: inset; border-width: 4px | outset hr / div, border-style: outset; border-width: 4px | groove hr / div, border-style: groove; border-width: 6px | ridge hr / div, border-style: ridge; border-width: 6px |
solid hr, border-style: solid; border-width: 2px | dashed hr, border-style: dashed; border-width: 3px | dotted hr, border-style: dotted; border-width: 3px | noshade attribute hr, noshade |
100% hr / div, width: 100%; border: 4px inset #808080 | 75% hr / div, width: 75%; border: 4px inset #808080 | 50% hr / div, width: 50%; border: 4px inset #808080 | 25% hr / div, width: 25%; border: 4px inset #808080 |
50%, margin-left hr / div, width: 50%; margin-left: 20px; border: 4px solid #4a90d9 | 50%, padding hr / div, width: 50%; padding: 0 10px; border: 4px solid #4a90d9 | 50%, border-box hr / div, width: 50%; box-sizing: border-box; border: 6px solid #4a90d9 | auto, with padding hr / div, padding: 0 10px; border: 4px solid #4a90d9 |
auto, border-box + padding hr / div, box-sizing: border-box; padding: 0 10px; border: 4px solid #4a90d9 | auto, border-box hr / div, box-sizing: border-box; border: 6px solid #4a90d9 | 50% in a padded box hr / div, width: 50%; border: 4px solid #4a90d9 | auto in a padded box hr / div, border: 4px solid #4a90d9 |
all four sides width/height: 0; border-color: #d94a4a #4ad98a #4a90d9 #d9c74a | one side visible width/height: 0; border-color: transparent transparent #4a90d9 transparent | thick vs thin border: solid #4a90d9; border-width: 30px 2px 30px 2px | double, uneven border: double #4a90d9; border-width: 9px 24px 15px 30px |
solid border: 16px solid; border-radius: 24px | dotted border: 16px dotted; border-radius: 24px | dashed border: 16px dashed; border-radius: 24px | double border: 16px double; border-radius: 24px |
solid, pill border: 10px solid; border-radius: 999px | dotted, pill border: 10px dotted; border-radius: 999px | double, pill border: 12px double; border-radius: 999px | groove border: 16px groove; border-radius: 24px |
solid, elliptical border: 12px solid; border-radius: 40px / 20px | double, elliptical border: 15px double; border-radius: 40px / 20px | dashed, pill border: 10px dashed; border-radius: 999px | ridge border: 16px ridge; border-radius: 24px |
groove, mixed width and color border-style: groove; border-width: 18px 6px 14px 10px; border-color: #d94a4a #4ad98a #4a90d9 #d9c74a; border-radius: 24px |
groove / solid / ridge / dashed border: 18px #4a90d9; border-style: groove solid ridge dashed; border-radius: 36px | one dot / two dots same rounded border at width: 240px / 245px |