Press/to search

Borders

Border Width

Utilities for sets border width in increments of 1px.


Class

classcss
borderborder-width: 1px
border-0border-width: 0
border-2border-width: 2px
border-4border-width: 4px
border-8border-width: 8px
classcss
border-t-0border-top-width: 0
border-t-2border-top-width: 2px
border-t-4border-top-width: 4px
border-t-8border-top-width: 8px
classcss
border-b-0border-bottom-width: 0
border-b-2border-bottom-width: 2px
border-b-4border-bottom-width: 4px
border-b-8border-bottom-width: 8px
classcss
border-l-0border-left-width: 0
border-l-2border-left-width: 2px
border-l-4border-left-width: 4px
border-l-8border-left-width: 8px
classcss
border-r-0border-right-width: 0
border-r-2border-right-width: 2px
border-r-4border-right-width: 4px
border-r-8border-right-width: 8px

Usage

<!-- Example -->
<y class="border-8">
...
</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',
$property: border,
$modifier: (
1: 3px,
2: 6px
//...
)
);

// Add Variants
@include yogurt(
$class: 'border',
$property: border,
$modifier: (
1: 3px,
2: 6px
//...
),
$variant: (
'focus'
//...
)
);

Variant

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

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