Press/to search

Borders

Border Color

Utilities for sets border color.

Class

classcss
border-transparentborder-color: transparent
border-currentborder-color: currentColor
border-whiteborder-color: #fff
border-black-100border-color: #b9b9b9
border-black-200border-color: #a2a2a2
border-black-300border-color: #8b8b8b
border-black-400border-color: #737373
border-black-500border-color: #5c5c5c
border-black-600border-color: #454545
border-black-700border-color: #2e2e2e
border-black-800border-color: #171717
border-black-900border-color: #000000
border-charcoal-100border-color: #222c35
border-charcoal-200border-color: #1f2831
border-charcoal-300border-color: #1c252c
border-charcoal-400border-color: #192127
border-charcoal-500border-color: #161d22
border-charcoal-600border-color: #13181d
border-charcoal-700border-color: #101419
border-charcoal-800border-color: #0d1014
border-charcoal-900border-color: #0a0c0f
border-gray-100border-color: #f7fafc
border-gray-200border-color: #edf2f7
border-gray-300border-color: #e2e8f0
border-gray-400border-color: #cbd5e0
border-gray-500border-color: #a0aec0
border-gray-600border-color: #718096
border-gray-700border-color: #4a5568
border-gray-800border-color: #2d3748
border-gray-900border-color: #1a202c
border-red-100border-color: #fff5f5
border-red-200border-color: #fed7d7
border-red-300border-color: #feb2b2
border-red-400border-color: #fc8181
border-red-500border-color: #f56565
border-red-600border-color: #e53e3e
border-red-700border-color: #c53030
border-red-800border-color: #9b2c2c
border-red-900border-color: #742a2a
border-orange-100border-color: #fffaf0
border-orange-200border-color: #feebc8
border-orange-300border-color: #fbd38d
border-orange-400border-color: #f6ad55
border-orange-500border-color: #ed8936
border-orange-600border-color: #dd6b20
border-orange-700border-color: #c05621
border-orange-800border-color: #9c4221
border-orange-900border-color: #7b341e
border-green-100border-color: #f0fff4
border-green-200border-color: #c6f6d5
border-green-300border-color: #9ae6b4
border-green-400border-color: #68d391
border-green-500border-color: #48bb78
border-green-600border-color: #38a169
border-green-700border-color: #2f855a
border-green-800border-color: #276749
border-green-900border-color: #22543d
border-teal-100border-color: #e6fffa
border-teal-200border-color: #b2f5ea
border-teal-300border-color: #81e6d9
border-teal-400border-color: #4fd1c5
border-teal-500border-color: #38b2ac
border-teal-600border-color: #319795
border-teal-700border-color: #2c7a7b
border-teal-800border-color: #285e61
border-teal-900border-color: #234e52
border-blue-100border-color: #ebf8ff
border-blue-200border-color: #bee3f8
border-blue-300border-color: #90cdf4
border-blue-400border-color: #63b3ed
border-blue-500border-color: #4299e1
border-blue-600border-color: #3182ce
border-blue-700border-color: #2b6cb0
border-blue-800border-color: #2c5282
border-blue-900border-color: #2a4365
border-indigo-100border-color: #ebf4ff
border-indigo-200border-color: #c3dafe
border-indigo-300border-color: #a3bffa
border-indigo-400border-color: #7f9cf5
border-indigo-500border-color: #667eea
border-indigo-600border-color: #5a67d8
border-indigo-700border-color: #4c51bf
border-indigo-800border-color: #434190
border-indigo-900border-color: #3c366b
border-purple-100border-color: #faf5ff
border-purple-200border-color: #e9d8fd
border-purple-300border-color: #d6bcfa
border-purple-400border-color: #b794f4
border-purple-500border-color: #9f7aea
border-purple-600border-color: #805ad5
border-purple-700border-color: #6b46c1
border-purple-800border-color: #553c9a
border-purple-900border-color: #44337a
border-pink-100border-color: #fff5f7
border-pink-200border-color: #fed7e2
border-pink-300border-color: #fbb6ce
border-pink-400border-color: #f687b3
border-pink-500border-color: #ed64a6
border-pink-600border-color: #d53f8c
border-pink-700border-color: #b83280
border-pink-800border-color: #97266d
border-pink-900border-color: #702459
border-khaki-100border-color: #f9f7f4
border-khaki-200border-color: #f0ebe4
border-khaki-300border-color: #e7dfd3
border-khaki-400border-color: #d5c8b2
border-khaki-500border-color: #c3b091
border-khaki-600border-color: #b09e83
border-khaki-700border-color: #756a57
border-khaki-800border-color: #584f41
border-khaki-900border-color: #3b352c
border-amber-100border-color: #fff9e6
border-amber-200border-color: #fff0bf
border-amber-300border-color: #ffe799
border-amber-400border-color: #ffd54d
border-amber-500border-color: #ffc300
border-amber-600border-color: #e6b000
border-amber-700border-color: #997500
border-amber-800border-color: #735800
border-amber-900border-color: #4d3b00
border-nero-100border-color: #e9e9e9
border-nero-200border-color: #c7c8c9
border-nero-300border-color: #a6a7a8
border-nero-400border-color: #636466
border-nero-500border-color: #202225
border-nero-600border-color: #1d1f21
border-nero-700border-color: #131416
border-nero-800border-color: #0e0f11
border-nero-900border-color: #0a0a0b

Usage

<!-- Example -->
<y class="border-8 border-amber-400">
  ...
</y>

v1.1.0 Set auto dark theme enabled to an element with added (dark) prefix.

<!-- Example -->
<y class="border-8 border-nero-100 ... (dark)border-8 (dark)border-gray-300">
  ...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'border-gray',
  $property: border-color,
  $modifier: (
    100: #262626,
    200: #252525
    //...
  )
);

// Add Variants
@include yogurt(
  $class: 'border-gray',
  $property: border-color,
  $modifier: (
    100: #262626,
    200: #252525
    //...
  ),
  $variant: (
    'dark-mode',
    'hover',
    'focus-within',
    'focus-visible',
    'checked'
    //...
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.