Press/to search

Borders

Border Radius

Utilities for sets border radius.


Class

classcss
rounded-noneborder-radius: 0
rounded-smborder-radius: 0.125rem
roundedborder-radius: 0.25rem
rounded-mdborder-radius: 0.375rem
rounded-lgborder-radius: 0.5rem
rounded-fullborder-radius: 9999px
rounded-t-noneborder-top-left-radius: 0;
border-top-right-radius: 0
rounded-r-noneborder-top-right-radius: 0;
border-bottom-right-radius: 0
rounded-b-noneborder-bottom-right-radius: 0;
border-bottom-left-radius: 0
rounded-l-noneborder-top-left-radius: 0;
border-bottom-left-radius: 0
rounded-t-smborder-top-left-radius: 0.125rem;
border-top-right-radius: 0.125rem
rounded-r-smborder-top-right-radius: 0.125rem;
border-bottom-right-radius: 0.125rem
rounded-b-smborder-bottom-right-radius: 0.125rem;
border-bottom-left-radius: 0.125rem
rounded-l-smborder-top-left-radius: 0.125rem;
border-bottom-left-radius: 0.125rem
rounded-tborder-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem
rounded-rborder-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem
rounded-bborder-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem
rounded-lborder-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem
rounded-t-mdborder-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem
rounded-r-mdborder-top-right-radius: 0.375rem;
border-bottom-right-radius: 0.375rem
rounded-b-mdborder-bottom-right-radius: 0.375rem;
border-bottom-left-radius: 0.375rem
rounded-l-mdborder-top-left-radius: 0.375rem;
border-bottom-left-radius: 0.375rem
rounded-t-lgborder-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem
rounded-r-lgborder-top-right-radius: 0.5rem;
border-bottom-right-radius: 0.5rem
rounded-b-lgborder-bottom-right-radius: 0.5rem;
border-bottom-left-radius: 0.5rem
rounded-l-lgborder-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem
rounded-t-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px
rounded-r-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px
rounded-b-fullborder-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px
rounded-l-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px

Usage

<!-- Example -->
<y class="rounded-lg">
...
</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: 'rounded',
$property: border-radius,
$modifier: (
xl: 2rem,
2xl: 3rem
//...
)
);

// Add Variants
@include yogurt(
$class: 'rounded',
$property: border-radius,
$modifier: (
xl: 2rem,
2xl: 3rem
//...
),
$variant: (
'responsive'
)
);

Variant

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

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