Outline Color

Set the color for an element's outline.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

oc-red-1
outline-color: #fbdfe1;
oc-red-2
outline-color: #f8c4c8;
oc-red-3
outline-color: #f4a8ae;
oc-red-4
outline-color: #f18c94;
oc-red-5
outline-color: #ed707a;
oc-red-6
outline-color: #ea5560;
oc-red
outline-color: #e63946;
oc-red-7
outline-color: #c6313c;
oc-red-8
outline-color: #a62932;
oc-red-9
outline-color: #852129;
oc-red-10
outline-color: #65191f;
oc-red-11
outline-color: #451115;
oc-red-12
outline-color: #25090b;
oc-orange-1
outline-color: #ffe7df;
oc-orange-2
outline-color: #ffd3c2;
oc-orange-3
outline-color: #ffbea6;
oc-orange-4
outline-color: #ffa98a;
oc-orange-5
outline-color: #ff946e;
oc-orange-6
outline-color: #ff8051;
oc-orange
outline-color: #ff6b35;
oc-orange-7
outline-color: #db5c2e;
oc-orange-8
outline-color: #b84d26;
oc-orange-9
outline-color: #943e1f;
oc-orange-10
outline-color: #702f17;
oc-orange-11
outline-color: #4d2010;
oc-orange-12
outline-color: #291108;
oc-yellow-1
outline-color: #fff4db;
oc-yellow-2
outline-color: #ffeabb;
oc-yellow-3
outline-color: #ffe09b;
oc-yellow-4
outline-color: #ffd67b;
oc-yellow-5
outline-color: #ffcc5c;
oc-yellow-6
outline-color: #ffc23c;
oc-yellow
outline-color: #ffb81c;
oc-yellow-7
outline-color: #db9e18;
oc-yellow-8
outline-color: #b88414;
oc-yellow-9
outline-color: #946b10;
oc-yellow-10
outline-color: #70510c;
oc-yellow-11
outline-color: #4d3708;
oc-yellow-12
outline-color: #291d04;
oc-lime-1
outline-color: #ebf7da;
oc-lime-2
outline-color: #daf0b9;
oc-lime-3
outline-color: #c9e998;
oc-lime-4
outline-color: #b8e178;
oc-lime-5
outline-color: #a6da57;
oc-lime-6
outline-color: #95d337;
oc-lime
outline-color: #84cc16;
oc-lime-7
outline-color: #72af13;
oc-lime-8
outline-color: #5f9310;
oc-lime-9
outline-color: #4d760d;
oc-lime-10
outline-color: #3a5a0a;
oc-lime-11
outline-color: #283d07;
oc-lime-12
outline-color: #152104;
oc-mint-1
outline-color: #d9f4eb;
oc-mint-2
outline-color: #b7ead9;
oc-mint-3
outline-color: #96e0c8;
oc-mint-4
outline-color: #74d6b6;
oc-mint-5
outline-color: #53cda4;
oc-mint-6
outline-color: #31c393;
oc-mint
outline-color: #10b981;
oc-mint-7
outline-color: #0e9f6f;
oc-mint-8
outline-color: #0c855d;
oc-mint-9
outline-color: #096b4b;
oc-mint-10
outline-color: #075139;
oc-mint-11
outline-color: #053827;
oc-mint-12
outline-color: #031e15;
oc-green-1
outline-color: #d7f8f0;
oc-green-2
outline-color: #b4f3e3;
oc-green-3
outline-color: #91edd5;
oc-green-4
outline-color: #6fe7c8;
oc-green-5
outline-color: #4ce1bb;
oc-green-6
outline-color: #29dcad;
oc-green
outline-color: #06d6a0;
oc-green-7
outline-color: #05b88a;
oc-green-8
outline-color: #049a73;
oc-green-9
outline-color: #037c5d;
oc-green-10
outline-color: #035e46;
oc-green-11
outline-color: #024030;
oc-green-12
outline-color: #01221a;
oc-cyan-1
outline-color: #d7f3f8;
oc-cyan-2
outline-color: #b4e9f2;
oc-cyan-3
outline-color: #91dfec;
oc-cyan-4
outline-color: #6fd5e6;
oc-cyan-5
outline-color: #4ccae0;
oc-cyan-6
outline-color: #29c0da;
oc-cyan
outline-color: #06b6d4;
oc-cyan-7
outline-color: #059db6;
oc-cyan-8
outline-color: #048399;
oc-cyan-9
outline-color: #036a7b;
oc-cyan-10
outline-color: #03505d;
oc-cyan-11
outline-color: #023740;
oc-cyan-12
outline-color: #011d22;
oc-sky-1
outline-color: #dff4fe;
oc-sky-2
outline-color: #c3ebfd;
oc-sky-3
outline-color: #a7e2fc;
oc-sky-4
outline-color: #8cd9fb;
oc-sky-5
outline-color: #70cffa;
oc-sky-6
outline-color: #54c6f9;
oc-sky
outline-color: #38bdf8;
oc-sky-7
outline-color: #30a3d5;
oc-sky-8
outline-color: #2888b3;
oc-sky-9
outline-color: #206e90;
oc-sky-10
outline-color: #19536d;
oc-sky-11
outline-color: #11394a;
oc-sky-12
outline-color: #091e28;
oc-blue-1
outline-color: #dce6fc;
oc-blue-2
outline-color: #bed0f9;
oc-blue-3
outline-color: #9fbaf6;
oc-blue-4
outline-color: #81a5f3;
oc-blue-5
outline-color: #628ff1;
oc-blue-6
outline-color: #4479ee;
oc-blue
outline-color: #2563eb;
oc-blue-7
outline-color: #2055ca;
oc-blue-8
outline-color: #1b47a9;
oc-blue-9
outline-color: #153988;
oc-blue-10
outline-color: #102c67;
oc-blue-11
outline-color: #0b1e47;
oc-blue-12
outline-color: #061026;
oc-indigo-1
outline-color: #e6e7fd;
oc-indigo-2
outline-color: #d0d1fb;
oc-indigo-3
outline-color: #babcf9;
oc-indigo-4
outline-color: #a5a6f7;
oc-indigo-5
outline-color: #8f91f5;
oc-indigo-6
outline-color: #797bf3;
oc-indigo
outline-color: #6366f1;
oc-indigo-7
outline-color: #5558cf;
oc-indigo-8
outline-color: #4749ae;
oc-indigo-9
outline-color: #393b8c;
oc-indigo-10
outline-color: #2c2d6a;
oc-indigo-11
outline-color: #1e1f48;
oc-indigo-12
outline-color: #101027;
oc-violet-1
outline-color: #ece5fe;
oc-violet-2
outline-color: #dccefc;
oc-violet-3
outline-color: #ccb7fb;
oc-violet-4
outline-color: #bca0fa;
oc-violet-5
outline-color: #ab8af9;
oc-violet-6
outline-color: #9b73f7;
oc-violet
outline-color: #8b5cf6;
oc-violet-7
outline-color: #784fd4;
oc-violet-8
outline-color: #6442b1;
oc-violet-9
outline-color: #51358f;
oc-violet-10
outline-color: #3d286c;
oc-violet-11
outline-color: #2a1c4a;
oc-violet-12
outline-color: #160f27;
oc-lavender-1
outline-color: #f1ecfe;
oc-lavender-2
outline-color: #e5dcfe;
oc-lavender-3
outline-color: #d8ccfd;
oc-lavender-4
outline-color: #ccbcfc;
oc-lavender-5
outline-color: #c0abfb;
oc-lavender-6
outline-color: #b39bfb;
oc-lavender
outline-color: #a78bfa;
oc-lavender-7
outline-color: #9078d7;
oc-lavender-8
outline-color: #7864b4;
oc-lavender-9
outline-color: #615191;
oc-lavender-10
outline-color: #493d6e;
oc-lavender-11
outline-color: #322a4b;
oc-lavender-12
outline-color: #1b1628;
oc-magenta-1
outline-color: #f9e1fc;
oc-magenta-2
outline-color: #f4c8fa;
oc-magenta-3
outline-color: #eeaef8;
oc-magenta-4
outline-color: #e994f6;
oc-magenta-5
outline-color: #e47af3;
oc-magenta-6
outline-color: #de60f1;
oc-magenta
outline-color: #d946ef;
oc-magenta-7
outline-color: #bb3cce;
oc-magenta-8
outline-color: #9c32ac;
oc-magenta-9
outline-color: #7e298b;
oc-magenta-10
outline-color: #5f1f69;
oc-magenta-11
outline-color: #411548;
oc-magenta-12
outline-color: #230b26;
oc-pink-1
outline-color: #fce2ef;
oc-pink-2
outline-color: #f9c8e0;
oc-pink-3
outline-color: #f7aed2;
oc-pink-4
outline-color: #f495c4;
oc-pink-5
outline-color: #f17bb6;
oc-pink-6
outline-color: #ef62a7;
oc-pink
outline-color: #ec4899;
oc-pink-7
outline-color: #cb3e84;
oc-pink-8
outline-color: #aa346e;
oc-pink-9
outline-color: #892a59;
oc-pink-10
outline-color: #682043;
oc-pink-11
outline-color: #47162e;
oc-pink-12
outline-color: #260c18;
oc-coral-1
outline-color: #ffe8ed;
oc-coral-2
outline-color: #ffd4de;
oc-coral-3
outline-color: #ffc0cf;
oc-coral-4
outline-color: #ffabbf;
oc-coral-5
outline-color: #ff97b0;
oc-coral-6
outline-color: #ff83a0;
oc-coral
outline-color: #ff6f91;
oc-coral-7
outline-color: #db5f7d;
oc-coral-8
outline-color: #b85068;
oc-coral-9
outline-color: #944054;
oc-coral-10
outline-color: #703140;
oc-coral-11
outline-color: #4d212c;
oc-coral-12
outline-color: #291217;
oc-zinc-1
outline-color: #e3e3e5;
oc-zinc-2
outline-color: #cbcbce;
oc-zinc-3
outline-color: #b3b3b7;
oc-zinc-4
outline-color: #9b9ba0;
oc-zinc-5
outline-color: #828289;
oc-zinc-6
outline-color: #6a6a72;
oc-zinc
outline-color: #52525b;
oc-zinc-7
outline-color: #47474e;
oc-zinc-8
outline-color: #3b3b42;
oc-zinc-9
outline-color: #303035;
oc-zinc-10
outline-color: #242428;
oc-zinc-11
outline-color: #19191b;
oc-zinc-12
outline-color: #0d0d0f;
oc-gray-1
outline-color: #e7e8eb;
oc-gray-2
outline-color: #d3d5d9;
oc-gray-3
outline-color: #bec1c7;
oc-gray-4
outline-color: #a9adb5;
oc-gray-5
outline-color: #9499a4;
oc-gray-6
outline-color: #808692;
oc-gray
outline-color: #6b7280;
oc-gray-7
outline-color: #5c626e;
oc-gray-8
outline-color: #4d525c;
oc-gray-9
outline-color: #3e424a;
oc-gray-10
outline-color: #2f3238;
oc-gray-11
outline-color: #202226;
oc-gray-12
outline-color: #111214;
oc-slate-1
outline-color: #e6e9ec;
oc-slate-2
outline-color: #d1d5dc;
oc-slate-3
outline-color: #bbc2cc;
oc-slate-4
outline-color: #a5aebc;
oc-slate-5
outline-color: #8f9bab;
oc-slate-6
outline-color: #7a879b;
oc-slate
outline-color: #64748b;
oc-slate-7
outline-color: #566478;
oc-slate-8
outline-color: #485464;
oc-slate-9
outline-color: #3a4351;
oc-slate-10
outline-color: #2c333d;
oc-slate-11
outline-color: #1e232a;
oc-slate-12
outline-color: #101316;
oc-silver-1
outline-color: #eff0f2;
oc-silver-2
outline-color: #e1e3e7;
oc-silver-3
outline-color: #d3d7dc;
oc-silver-4
outline-color: #c6cad1;
oc-silver-5
outline-color: #b8bdc5;
oc-silver-6
outline-color: #aab0ba;
oc-silver
outline-color: #9ca3af;
oc-silver-7
outline-color: #868c97;
oc-silver-8
outline-color: #70757e;
oc-silver-9
outline-color: #5a5f66;
oc-silver-10
outline-color: #45484d;
oc-silver-11
outline-color: #2f3135;
oc-silver-12
outline-color: #191a1c;
oc-black
outline-color: #000000;
oc-current
outline-color: currentColor;
oc-transparent
outline-color: transparent;
oc-white
outline-color: #ffffff;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

sm:oc-(value)
Small≥640px
md:oc-(value)
Medium≥768px
lg:oc-(value)
Large≥1024px
xxl:oc-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:oc-(value)

Opacity Modifiers

Adjust color transparency by appending an opacity suffix.

Append /(opacity) to any color utility to control its transparency level.

Syntax:oc-(color)/(opacity)