Press
/
to search

Interactivity

Outline

Utilities to set outline style surrounding the edge of an element, including the width thickness, color and outline offset.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
outline {style} {thickness} {offset} {color}--outline-style: none; --outline-thickness: 1px; --outline-offset: 0; --outline-color: currentColor; outline-style: var(--outline-style); outline-width: var(--outline-thickness); outline-offset: var(--outline-offset); outline-color: var(--outline-color)
classcss
style-noneoutline-style: none
style-dottedoutline-style: dotted
style-dashedoutline-style: dashed
style-solidoutline-style: solid
style-doubleoutline-style: double
style-grooveoutline-style: groove
style-ridgeoutline-style: ridge
style-insetoutline-style: inset
style-outsetoutline-style: outset
classcss
thinkness-1outline-width: 0.25rem
thinkness-2outline-width: 0.5rem
thinkness-3outline-width: 0.75rem
thinkness-4outline-width: 1rem
thinkness-5outline-width: 1.25rem
thinkness-6outline-width: 1.5rem
thinkness-8outline-width: 2rem
thinkness-10outline-width: 2.5rem
thinkness-12outline-width: 3rem
thinkness-16outline-width: 4rem
thinkness-20outline-width: 5rem
thinkness-24outline-width: 6rem
thinkness-32outline-width: 8rem
thinkness-40outline-width: 10rem
thinkness-48outline-width: 12rem
thinkness-56outline-width: 14rem
thinkness-64outline-width: 16rem
thinkness-72outline-width: 18rem
thinkness-80outline-width: 20rem
thinkness-88outline-width: 22rem
thinkness-96outline-width: 24rem
thinkness-104outline-width: 26rem
thinkness-112outline-width: 28rem
classcss
offset-1outline-offset: 0.25rem
offset-2outline-offset: 0.5rem
offset-3outline-offset: 0.75rem
offset-4outline-offset: 1rem
offset-5outline-offset: 1.25rem
offset-6outline-offset: 1.5rem
offset-8outline-offset: 2rem
offset-10outline-offset: 2.5rem
offset-12outline-offset: 3rem
offset-16outline-offset: 4rem
offset-20outline-offset: 5rem
offset-24outline-offset: 6rem
offset-32outline-offset: 8rem
offset-40outline-offset: 10rem
offset-48outline-offset: 12rem
offset-56outline-offset: 14rem
offset-64outline-offset: 16rem
offset-72outline-offset: 18rem
offset-80outline-offset: 20rem
offset-88outline-offset: 22rem
offset-96outline-offset: 24rem
offset-104outline-offset: 26rem
offset-112outline-offset: 28rem
classcss
outline-charcoal-1outline-color: #222c35
outline-charcoal-2outline-color: #1f2831
outline-charcoal-3outline-color: #1c252c
outline-charcoal-4outline-color: #192127
outline-charcoal-5outline-color: #161d22
outline-charcoal-6outline-color: #13181d
outline-charcoal-7outline-color: #101419
outline-charcoal-8outline-color: #0d1014
outline-charcoal-9outline-color: #0a0c0f
outline-gray-1outline-color: #f7fafc
outline-gray-2outline-color: #edf2f7
outline-gray-3outline-color: #e2e8f0
outline-gray-4outline-color: #cbd5e0
outline-gray-5outline-color: #a0aec0
outline-gray-6outline-color: #718096
outline-gray-7outline-color: #4a5568
outline-gray-8outline-color: #2d3748
outline-gray-9outline-color: #1a202c
outline-red-1outline-color: #fff5f5
outline-red-2outline-color: #fed7d7
outline-red-3outline-color: #feb2b2
outline-red-4outline-color: #fc8181
outline-red-5outline-color: #f56565
outline-red-6outline-color: #e53e3e
outline-red-7outline-color: #c53030
outline-red-8outline-color: #9b2c2c
outline-red-9outline-color: #742a2a
outline-orange-1outline-color: #fffaf0
outline-orange-2outline-color: #feebc8
outline-orange-3outline-color: #fbd38d
outline-orange-4outline-color: #f6ad55
outline-orange-5outline-color: #ed8936
outline-orange-6outline-color: #dd6b20
outline-orange-7outline-color: #c05621
outline-orange-8outline-color: #9c4221
outline-orange-9outline-color: #7b341e
outline-green-1outline-color: #f0fff4
outline-green-2outline-color: #c6f6d5
outline-green-3outline-color: #9ae6b4
outline-green-4outline-color: #68d391
outline-green-5outline-color: #48bb78
outline-green-6outline-color: #38a169
outline-green-7outline-color: #2f855a
outline-green-8outline-color: #276749
outline-green-9outline-color: #22543d
outline-teal-1outline-color: #e6fffa
outline-teal-2outline-color: #b2f5ea
outline-teal-3outline-color: #81e6d9
outline-teal-4outline-color: #4fd1c5
outline-teal-5outline-color: #38b2ac
outline-teal-6outline-color: #319795
outline-teal-7outline-color: #2c7a7b
outline-teal-8outline-color: #285e61
outline-teal-9outline-color: #234e52
outline-blue-1outline-color: #ebf8ff
outline-blue-2outline-color: #bee3f8
outline-blue-3outline-color: #90cdf4
outline-blue-4outline-color: #63b3ed
outline-blue-5outline-color: #4299e1
outline-blue-6outline-color: #3182ce
outline-blue-7outline-color: #2b6cb0
outline-blue-8outline-color: #2c5282
outline-blue-9outline-color: #2a4365
outline-indigo-1outline-color: #ebf4ff
outline-indigo-2outline-color: #c3dafe
outline-indigo-3outline-color: #a3bffa
outline-indigo-4outline-color: #7f9cf5
outline-indigo-5outline-color: #667eea
outline-indigo-6outline-color: #5a67d8
outline-indigo-7outline-color: #4c51bf
outline-indigo-8outline-color: #434190
outline-indigo-9outline-color: #3c366b
outline-purple-1outline-color: #faf5ff
outline-purple-2outline-color: #e9d8fd
outline-purple-3outline-color: #d6bcfa
outline-purple-4outline-color: #b794f4
outline-purple-5outline-color: #9f7aea
outline-purple-6outline-color: #805ad5
outline-purple-7outline-color: #6b46c1
outline-purple-8outline-color: #553c9a
outline-purple-9outline-color: #44337a
outline-pink-1outline-color: #fff5f7
outline-pink-2outline-color: #fed7e2
outline-pink-3outline-color: #fbb6ce
outline-pink-4outline-color: #f687b3
outline-pink-5outline-color: #ed64a6
outline-pink-6outline-color: #d53f8c
outline-pink-7outline-color: #b83280
outline-pink-8outline-color: #97266d
outline-pink-9outline-color: #702459
outline-khaki-1outline-color: #f9f7f4
outline-khaki-2outline-color: #f0ebe4
outline-khaki-3outline-color: #e7dfd3
outline-khaki-4outline-color: #d5c8b2
outline-khaki-5outline-color: #c3b091
outline-khaki-6outline-color: #b09e83
outline-khaki-7outline-color: #756a57
outline-khaki-8outline-color: #584f41
outline-khaki-9outline-color: #3b352c
outline-amber-1outline-color: #fff9e6
outline-amber-2outline-color: #fff0bf
outline-amber-3outline-color: #ffe799
outline-amber-4outline-color: #ffd54d
outline-amber-5outline-color: #ffc3
outline-amber-6outline-color: #e6b0
outline-amber-7outline-color: #9975
outline-amber-8outline-color: #7358
outline-amber-9outline-color: #4d3b

Usage

<div class="outline style-dotted thickness-2 offset-2 outline-tint-lava-3 ... height-32 width-32 ... bg-tint-granite-5">
  ...
</div>
HTML
.dummy {
  @extend
    .outline,
    .style-dotted,
    .thickness-2,
    .offset-2,
    .outline-tint-lava-3,
    .height-32,
    .width-32,
    .bg-tint-granite-5;
}
SCSS
<div class="outline style-dashed thickness-2 offset-2 outline-tint-lava-3 ... height-32 width-32 ... bg-tint-granite-5">
  ...
</div>
HTML
.dummy {
  @extend
    .outline,
    .style-dashed,
    .thickness-2,
    .offset-2,
    .outline-tint-lava-3,
    .height-32,
    .width-32,
    .bg-tint-granite-5;
}
SCSS