Borders
Curve-border
Utilities for sets border radius.
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
| class | css | |
|---|---|---|
| curve-border | border-radius: 0.25rem | |
| curve-border-none | border-radius: 0 |
| class | css |
|---|---|
| curve-border-sm | border-radius: 0.125rem |
| curve-border-md | border-radius: 0.375rem |
| curve-border-lg | border-radius: 0.5rem |
| curve-border-full | border-radius: 9999px |
| class | css |
|---|---|
| curve-border-t-none | border-top-left-radius: 0; border-top-right-radius: 0 |
| curve-border-r-none | border-top-right-radius: 0; border-bottom-right-radius: 0 |
| curve-border-b-none | border-bottom-right-radius: 0; border-bottom-left-radius: 0 |
| curve-border-l-none | border-top-left-radius: 0; border-bottom-left-radius: 0 |
| class | css |
|---|---|
| curve-border-t | border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem |
| curve-border-r | border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem |
| curve-border-b | border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
| curve-border-l | border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem |
| class | css |
|---|---|
| curve-border-t-sm | border-top-left-radius: 0.125rem; border-top-right-radius: 0.125rem |
| curve-border-r-sm | border-top-right-radius: 0.125rem; border-bottom-right-radius: 0.125rem |
| curve-border-b-sm | border-bottom-right-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
| curve-border-l-sm | border-top-left-radius: 0.125rem; border-bottom-left-radius: 0.125rem |
| class | css |
|---|---|
| curve-border-t-md | border-top-left-radius: 0.375rem; border-top-right-radius: 0.375rem |
| curve-border-r-md | border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem |
| curve-border-b-md | border-bottom-right-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
| curve-border-l-md | border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem |
| class | css |
|---|---|
| curve-border-t-lg | border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem |
| curve-border-r-lg | border-top-right-radius: 0.5rem; border-bottom-right-radius: 0.5rem |
| curve-border-b-lg | border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
| curve-border-l-lg | border-top-left-radius: 0.5rem; border-bottom-left-radius: 0.5rem |
| class | css |
|---|---|
| curve-border-t-full | border-top-left-radius: 9999px; border-top-right-radius: 9999px |
| curve-border-r-full | border-top-right-radius: 9999px; border-bottom-right-radius: 9999px |
| curve-border-b-full | border-bottom-right-radius: 9999px; border-bottom-left-radius: 9999px |
| curve-border-l-full | border-top-left-radius: 9999px; border-bottom-left-radius: 9999px |
Usage
<div class="curve-border-lg ... bg-tint-granite-5 ... width-32 height-32">
...
</div>
HTML
.dummy {
@extend
.curve-border-lg,
.bg-tint-granite-5,
.width-32,
.height-32;
}
SCSS
Use (expand) variant to apply border radius to all child elements.
<!-- parent -->
<div class="(expand)curve-border-lg">
<!-- child -->
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
HTML
.dummy {
@extend
.(expand)curve-border-lg;
}
SCSS