CSS Border Colors
148+ CSS named colors with live border previews and ready-to-copy code
border: 3px solid red;Border Styles with red
All CSS Named Colors
Showing 144 of 144 colors
Border Width Examples with red
1px2px3px4px5px6px7px8px10px12px16px20pxWhat is CSS Border Colors?
CSS Border Colors is a reference tool that displays all 148 named CSS colors alongside live border previews, giving designers and developers an instant visual guide to the full named-color palette built into every browser. CSS ships with a rich set of human-readable color keywords — from common names like 'red', 'blue', and 'green' to more exotic ones like 'rebeccapurple', 'cornflowerblue', and 'papayawhip' — but finding the right one without a visual reference means guessing or searching the specification.
This tool renders each named color as a real CSS border so you can judge it in context, exactly as it would appear on an element in your UI. Alongside the border preview you can see the color keyword, its hex equivalent, and its RGB values, giving you the information you need to decide whether to use the keyword or its numeric form in your stylesheet.
The tool is especially helpful when matching a rough idea — "I want a medium blue" — to an exact CSS keyword. You can scan the palette, compare neighboring colors, and copy the name or hex value in a single click. It is also a useful learning resource for developers building familiarity with CSS color names, and for anyone who needs to quickly audit which named colors fall within WCAG contrast ratio guidelines for accessible text. All previews render live in your browser using real CSS, so what you see is exactly what you get.
How to Use CSS Border Colors
- Browse or search colors
Scroll through all 148 named CSS colors or type a name in the search box to filter the list instantly.
- View border previews
Each color is shown as a live CSS border so you can judge exactly how it will appear on a real element.
- Check hex and RGB values
See the hex and RGB equivalents alongside each named color for use in any design tool or stylesheet.
- Copy the color value
Click any color to copy the CSS keyword or hex value to your clipboard, ready to paste into your code.
Key Benefits
All 148 CSS named colors are displayed in one place — no need to open the spec or search online.
Colors are rendered as actual CSS borders, matching exactly how they will look in your browser.
Copy any color keyword or its hex equivalent to your clipboard with a single click.
Search by partial name to quickly locate a specific color without scrolling through the entire list.
Frequently Asked Questions
CSS defines 148 named color keywords. These are part of the CSS Color Level 4 specification and are supported in all modern browsers. The list includes the original 16 HTML colors, the 140 X11 colors, and the special keyword "rebeccapurple".
Yes, named colors are just human-readable aliases for specific hex values. For example, "red" is exactly equivalent to #FF0000. You can use either form interchangeably in CSS.
Absolutely. Any value that accepts a color in CSS — including border-color, border-top-color, outline-color, background-color, and color — accepts named color keywords.
Rebeccapurple (#663399) was added to the CSS specification in 2014 in memory of Rebecca Meyer, daughter of web standards advocate Eric Meyer. It is the only CSS color named after a real person.