Outline color


outline-color: {...};


<div class="t1 w-96 h-96 bg-c-white outline-4 outline-solid outline-c-blue"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Outline color by name.
t1 outline-c-blue
.t1.outline-c-blue { outline-color: #12A4E2; }
Outline color by name and shade.
t1 outline-c-blue-500
.t1.outline-c-blue-500 { outline-color: #12A4E2; }
Outline color by name, shade, opacity.
t1 outline-c-blue-500-50
.t1.outline-c-blue-500-50 { outline-color: #12A4E280; }
Outline color by HEX color value in lowercase format.
t1 outline-c-hex-abcdef
.t1.outline-c-hex-abcdef { outline-color: #ABCDEF; }
Outline color by HEX color value in uppercase format.
t1 outline-c-hex-ABCDEF
.t1.outline-c-hex-ABCDEF { outline-color: #ABCDEF; }
Outline color by HEX color value with alpha channel.
t1 outline-c-hex-12345678
.t1.outline-c-hex-12345678 { outline-color: #12345678; }
Outline color by rgb color value.
t1 outline-c-rgb-12-34-56
.t1.outline-c-rgb-12-34-56 { outline-color: rgb(12, 34, 56); }
Outline color by rgba color value.
t1 outline-c-rgb-12-34-56-78
.t1.outline-c-rgb-12-34-56-78 { outline-color: rgba(12, 34, 56, 78%); }
Outline color by hsl color value.
t1 outline-c-hsl-60-20-40
.t1.outline-c-hsl-60-20-40 { outline-color: hsl(60deg, 20%, 40%); }
Outline color by hsla color value.
t1 outline-c-hsl-60-20-40-66
.t1.outline-c-hsl-60-20-40-66 { outline-color: hsla(60deg, 20%, 40%, 66%); }
Unknown color name.
t1 outline-c-unknownname
Error: unknown color definition [unknownname] in class name [outline-c-unknownname]