Borders
Controlled by $border-widths and $border-radii respectively in _config.scss
Sass mixins
| Mixin | CSS properties |
|---|---|
border($key: "DEFAULT") | border-width |
border-x($key: "DEFAULT") | Left and right border-width |
border-y($key: "DEFAULT") | Top and bottom border-width |
border-t($key: "DEFAULT") | border-top-width |
border-r($key: "DEFAULT") | border-right-width |
border-b($key: "DEFAULT") | border-bottom-width |
border-l($key: "DEFAULT") | border-left-width |
rounded($key: "DEFAULT") | border-radius |
rounded-t($key: "DEFAULT") | Top corner radii |
rounded-b($key: "DEFAULT") | Bottom corner radii |
rounded-l($key: "DEFAULT") | Left corner radii |
rounded-r($key: "DEFAULT") | Right corner radii |
rounded-tl($key: "DEFAULT") | border-top-left-radius |
rounded-tr($key: "DEFAULT") | border-top-right-radius |
rounded-bl($key: "DEFAULT") | border-bottom-left-radius |
rounded-br($key: "DEFAULT") | border-bottom-right-radius |
Responsive range mixins
| Mixin | Purpose |
|---|---|
rounded-range($base, $breakpoint-range...) | Responsive border radius |
rounded-t-range($base, $breakpoint-range...) | Responsive top corner radii |
rounded-b-range($base, $breakpoint-range...) | Responsive bottom corner radii |
rounded-l-range($base, $breakpoint-range...) | Responsive left corner radii |
rounded-r-range($base, $breakpoint-range...) | Responsive right corner radii |
Utility classes
Border Width
| Class | Property |
|---|---|
border | border-width: 1px |
border-x | border-left-width: 1px; border-right-width: 1px |
border-y | border-top-width: 1px; border-bottom-width: 1px |
border-t | border-top-width: 1px |
border-r | border-right-width: 1px |
border-b | border-bottom-width: 1px |
border-l | border-left-width: 1px |
border-{width} (0, 2, 4, 8) | border-width: {width}px |
border-x-{width} (0, 2, 4, 8) | border-left-width: {width}px; border-right-width: {width}px |
border-y-{width} (0, 2, 4, 8) | border-top-width: {width}px; border-bottom-width: {width}px |
border-t-{width} (0, 2, 4, 8) | border-top-width: {width}px |
border-r-{width} (0, 2, 4, 8) | border-right-width: {width}px |
border-b-{width} (0, 2, 4, 8) | border-bottom-width: {width}px |
border-l-{width} (0, 2, 4, 8) | border-left-width: {width}px |
Border Radius
| Class | Property |
|---|---|
rounded | border-radius: {default radius} |
rounded-t | border-top-left-radius: {default radius}; border-top-right-radius: {default radius} |
rounded-b | border-bottom-left-radius: {default radius}; border-bottom-right-radius: {default radius} |
rounded-l | border-top-left-radius: {default radius}; border-bottom-left-radius: {default radius} |
rounded-r | border-top-right-radius: {default radius}; border-bottom-right-radius: {default radius} |
rounded-tl | border-top-left-radius: {default radius} |
rounded-tr | border-top-right-radius: {default radius} |
rounded-bl | border-bottom-left-radius: {default radius} |
rounded-br | border-bottom-right-radius: {default radius} |
rounded-{radius} (none, sm, md, lg, xl, 2xl, 3xl, full) | border-radius: {radius} |
rounded-t-{radius} | border-top-left-radius: {radius}; border-top-right-radius: {radius} |
rounded-b-{radius} | border-bottom-left-radius: {radius}; border-bottom-right-radius: {radius} |
rounded-l-{radius} | border-top-left-radius: {radius}; border-bottom-left-radius: {radius} |
rounded-r-{radius} | border-top-right-radius: {radius}; border-bottom-right-radius: {radius} |
rounded-tl-{radius} | border-top-left-radius: {radius} |
rounded-tr-{radius} | border-top-right-radius: {radius} |
rounded-bl-{radius} | border-bottom-left-radius: {radius} |
rounded-br-{radius} | border-bottom-right-radius: {radius} |
Example
html
<button class="rounded-lg border-2 border-blue-500 px-4 py-2">
Rounded button
</button>
<img class="rounded-full size-12" src="avatar.jpg" />