{"id":1120,"date":"2024-03-13T15:36:37","date_gmt":"2024-03-13T21:36:37","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1120"},"modified":"2024-03-13T15:36:37","modified_gmt":"2024-03-13T21:36:37","slug":"you-want-border-color-transparent-not-border-none","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/you-want-border-color-transparent-not-border-none\/","title":{"rendered":"You Want border-color: transparent, Not border: none"},"content":{"rendered":"\n

If you find yourself removing a border from an element that has a border and are tempted to use border: 0<\/code> , border: none<\/code>, or outline: none<\/code>, I\u2019d urge you to stop for a moment and reconsider. It\u2019s like the old G.K. Chesterton saying about fences<\/a>:<\/p>\n\n\n\n

\n

Do not remove a fence until you know why it was put up in the first place.<\/p>\n<\/blockquote>\n\n\n\n

In the case of interactive form controls (inputs, textareas, buttons, etc.), those pesky borders were put there because they have an accessibility benefit when using High Contrast Mode, a feature used by 30.6% of low-vision users<\/a>. Usually when we\u2019re talking about High Contrast Mode in web development we\u2019re specifically referencing Windows High Contrast Mode, but nearly every desktop and mobile operating system has contrast settings, each behaving a little differently. Windows High Contrast flattens all colors<\/a> to black on white with blue accents (or white on black with yellow accents) and remove all background images from the document.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If we look at some thing more interactive like the comment form on the Boost blog, we can see how the \u201cPost Comment\u201d button loses a bit of punch in High Contrast Mode and might be mistaken as text floating on the page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

To make that button look more like a button in high-contrast mode, we remove the border: 0<\/code> and instead use border-color: transparent<\/code> we get a control that looks like a button for low-vision users as well.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Sighted users will never know the difference! So instead of removing the border, try setting border-color<\/code> to transparent<\/code> instead:<\/p>\n\n\n

border-color<\/span>: transparent<\/span>;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The same trick works for overriding outline<\/code> , set outline-color<\/code> to transparent<\/code>:<\/p>\n\n\n
outline-color<\/span>: transparent<\/span>;<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Oops! I\u2019ve already nuked my borders<\/h2>\n\n\n\n
If you\u2019ve already removed borders everywhere and want to support High Contrast Mode (you do) but don\u2019t want to re-architect your entire CSS, you can use the forced-colors<\/code> media query to detect High Contrast Mode and layer in styling as necessary:<\/p>\n\n\n
\/* Example code, do not use *\/<\/span>\n@media<\/span> (forced-colors:<\/span> active) {\n  input<\/span>, textarea<\/span>, button<\/span> {\n    border<\/span>: 1px<\/span> solid transparent!important<\/span>;\n  }\n}<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
There are other places (e.g. text on images) where the forced-colors<\/code> media query can get you out of a jam.<\/p>\n\n\n\n
Testing forced-colors<\/h2>\n\n\n\n
To test forced-colors<\/code> the easiest way is to emulate forced-colors<\/code> inside Chrome DevTools. There are two easy ways in any version of Chromium browser and an even easier way in Microsoft Edge.<\/p>\n\n\n\n
    \n
  1. Chrome DevTools > Three Dots Menu > More Tools > Rendering > Emulate CSS media feature forced-colors<\/li>\n\n\n\n
  2. Chrome DevTools > Open Command Palette (CMD + Shift + P) > Search for \u201cEmulate CSS forced-colors: active\u201d<\/li>\n<\/ol>\n\n\n\n
    Edge DevTools has an easy way to access color emulation from the Device Emulation Screen as well.<\/p>\n\n\n\n