Border mixins

Border utility classes for WovenUI.

Classes:

border, border-{t|r|b|l|s|e|x|y}: Border on all sides or one side (width 1)
border-{0|1|2|4|8}, border-{t|r|b|l|s|e|x|y}-{width}: Border width, optionally per side
border-{solid|dashed|dotted|double|none}: Border style
rounded, rounded-{xs|sm|md|lg|xl|2xl|full|none}, square, pill: Border radius
rounded-{t|r|b|l|s|e|tl|tr|br|bl|ss|se|es|ee}-{size}: Radius per side or corner

The @breakpoint suffix exists for border, border-{0|1|2|4|8}, rounded, rounded-{xs|sm|md|lg|xl|2xl|full|none}, square and pill (border@md, rounded-lg@lg); per-side border, border style and per-side or corner radius classes have none.

hover:, focus:, active: and group-hover: variants exist only for border-{0|1|2|4|8} and border-{solid|dashed|dotted|double|none}, and have no breakpoint suffix.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Borders. The A to Z index lists every public mixin and function.

Source: utilities/_borders.scss

Mixins and functions

get-rounded-value() border border-top border-right border-bottom border-left border-start border-end rounded rounded-t rounded-r rounded-b rounded-l rounded-tl rounded-tr rounded-br rounded-bl rounded-s rounded-e rounded-ss rounded-se rounded-es rounded-ee border-style border-color border-all pill

`get-rounded-value()` function

Resolves a border radius: a $border-radii key gives its token, null gives the md token, and values with units stay raw.

A unitless number that is not a key, such as 4, raises an error.

@function get-rounded-value($val, $label: "get-rounded-value")

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	Required	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc(), var() or null
`$label`	`String`	`"get-rounded-value"`	Name that starts error messages; the rounded mixins pass their own name

Returns: String|Length A var(--wu-radius-*) reference or the raw value

Example

.card {
  border-radius: get-rounded-value(lg); // var(--wu-radius-lg)
}

Compiled CSS

.card {
  border-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:91

`border` mixin

Draws a border on all sides with a width key, a style and a color that defaults to the border-regular token.

A unitless width that is not a key, such as 3, raises an error; an unknown style raises an error.

@mixin border($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word (regular, strong, control, control-hover, focus), color value or var(); resolved like border-color()

Output: border-width, border-style: var(--wu-border-style), border-color and --wu-border-style; a zero width emits border-width only

Example 1

.card {
  @include border(1); // var(--wu-border-width-1), solid, var(--wu-border-regular)
}

Compiled CSS

.card {
  border-width: var(--wu-border-width-1);
  border-style: var(--wu-border-style);
  border-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.alert {
  @include border(2, dashed, danger);
}

Compiled CSS

.alert {
  border-width: var(--wu-border-width-2);
  border-style: var(--wu-border-style);
  border-color: var(--wu-danger);
  --wu-border-style: dashed;
}

Example 3

.input {
  @include apply(border(1, solid, control), rounded(md));
}

Compiled CSS

.input {
  border-width: var(--wu-border-width-1);
  border-style: var(--wu-border-style);
  border-color: var(--wu-border-control);
  --wu-border-style: solid;
  border-radius: var(--wu-radius-md);
}

See also: border-color, border-style, border-all. Source: utilities/_borders.scss:139

`border-top` mixin

Draws a border on the top side in the border-regular color unless a color is given.

@mixin border-top($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-top(1);
}

Compiled CSS

.item {
  border-top-width: var(--wu-border-width-1);
  border-top-style: var(--wu-border-style);
  border-top-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-top(2, dashed, brand);
}

Compiled CSS

.divider {
  border-top-width: var(--wu-border-width-2);
  border-top-style: var(--wu-border-style);
  border-top-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:192

`border-right` mixin

Draws a border on the right side (physical) in the border-regular color unless a color is given.

@mixin border-right($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-right(1);
}

Compiled CSS

.item {
  border-right-width: var(--wu-border-width-1);
  border-right-style: var(--wu-border-style);
  border-right-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-right(2, dashed, brand);
}

Compiled CSS

.divider {
  border-right-width: var(--wu-border-width-2);
  border-right-style: var(--wu-border-style);
  border-right-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:210

`border-bottom` mixin

Draws a border on the bottom side in the border-regular color unless a color is given.

@mixin border-bottom($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-bottom(1);
}

Compiled CSS

.item {
  border-bottom-width: var(--wu-border-width-1);
  border-bottom-style: var(--wu-border-style);
  border-bottom-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-bottom(2, dashed, brand);
}

Compiled CSS

.divider {
  border-bottom-width: var(--wu-border-width-2);
  border-bottom-style: var(--wu-border-style);
  border-bottom-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:228

`border-left` mixin

Draws a border on the left side (physical) in the border-regular color unless a color is given.

@mixin border-left($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-left(1);
}

Compiled CSS

.item {
  border-left-width: var(--wu-border-width-1);
  border-left-style: var(--wu-border-style);
  border-left-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-left(2, dashed, brand);
}

Compiled CSS

.divider {
  border-left-width: var(--wu-border-width-2);
  border-left-style: var(--wu-border-style);
  border-left-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:246

`border-start` mixin

Draws a border on the inline start side (left in LTR, right in RTL) in the border-regular color unless a color is given.

@mixin border-start($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-start(1);
}

Compiled CSS

.item {
  border-inline-start-width: var(--wu-border-width-1);
  border-inline-start-style: var(--wu-border-style);
  border-inline-start-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-start(2, dashed, brand);
}

Compiled CSS

.divider {
  border-inline-start-width: var(--wu-border-width-2);
  border-inline-start-style: var(--wu-border-style);
  border-inline-start-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:264

`border-end` mixin

Draws a border on the inline end side (right in LTR, left in RTL) in the border-regular color unless a color is given.

@mixin border-end($val, $style: solid, $color: null)

Parameter	Type	Default	Description
`$val`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length such as 3px
`$style`	`String`	`solid`	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color\|Null`	`null`	A role, palette name, theme word, color value or var(), resolved like border-color(); null gives the border-regular token

Example 1

.item {
  @include border-end(1);
}

Compiled CSS

.item {
  border-inline-end-width: var(--wu-border-width-1);
  border-inline-end-style: var(--wu-border-style);
  border-inline-end-color: var(--wu-border-regular);
  --wu-border-style: solid;
}

Example 2

.divider {
  @include border-end(2, dashed, brand);
}

Compiled CSS

.divider {
  border-inline-end-width: var(--wu-border-width-2);
  border-inline-end-style: var(--wu-border-style);
  border-inline-end-color: var(--wu-brand);
  --wu-border-style: dashed;
}

See also: border, border-color. Source: utilities/_borders.scss:282

`rounded` mixin

Rounds all corners with a $border-radii key (md when omitted) or a raw length.

A unitless number that is not a key, such as 4, raises an error.

@mixin rounded($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example 1

.card {
  @include rounded; // border-radius: var(--wu-radius-md)
}

Compiled CSS

.card {
  border-radius: var(--wu-radius-md);
}

Example 2

.avatar {
  @include apply(rounded(full), border(2, solid, brand));
}

Compiled CSS

.avatar {
  border-radius: var(--wu-radius-full);
  border-width: var(--wu-border-width-2);
  border-style: var(--wu-border-style);
  border-color: var(--wu-brand);
  --wu-border-style: solid;
}

border-radius on MDN

See also: pill, get-rounded-value(). Source: utilities/_borders.scss:301

`rounded-t` mixin

Rounds the top left and top right corners with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-t($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-t(lg);
}

Compiled CSS

.tab {
  border-top-left-radius: var(--wu-radius-lg);
  border-top-right-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:312

`rounded-r` mixin

Rounds the top right and bottom right corners (physical) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-r($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-r(lg);
}

Compiled CSS

.tab {
  border-top-right-radius: var(--wu-radius-lg);
  border-bottom-right-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:326

`rounded-b` mixin

Rounds the bottom left and bottom right corners with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-b($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-b(lg);
}

Compiled CSS

.tab {
  border-bottom-left-radius: var(--wu-radius-lg);
  border-bottom-right-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:340

`rounded-l` mixin

Rounds the top left and bottom left corners (physical) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-l($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-l(lg);
}

Compiled CSS

.tab {
  border-top-left-radius: var(--wu-radius-lg);
  border-bottom-left-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:354

`rounded-tl` mixin

Rounds the top left corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-tl($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-tl(lg);
}

Compiled CSS

.tab {
  border-top-left-radius: var(--wu-radius-lg);
}

border-top-left-radius on MDN

See also: rounded. Source: utilities/_borders.scss:369

`rounded-tr` mixin

Rounds the top right corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-tr($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-tr(lg);
}

Compiled CSS

.tab {
  border-top-right-radius: var(--wu-radius-lg);
}

border-top-right-radius on MDN

See also: rounded. Source: utilities/_borders.scss:383

`rounded-br` mixin

Rounds the bottom right corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-br($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-br(lg);
}

Compiled CSS

.tab {
  border-bottom-right-radius: var(--wu-radius-lg);
}

border-bottom-right-radius on MDN

See also: rounded. Source: utilities/_borders.scss:397

`rounded-bl` mixin

Rounds the bottom left corner with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-bl($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-bl(lg);
}

Compiled CSS

.tab {
  border-bottom-left-radius: var(--wu-radius-lg);
}

border-bottom-left-radius on MDN

See also: rounded. Source: utilities/_borders.scss:411

`rounded-s` mixin

Rounds both inline start corners (border-start-start-radius and border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-s($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-s(lg);
}

Compiled CSS

.tab {
  border-start-start-radius: var(--wu-radius-lg);
  border-end-start-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:424

`rounded-e` mixin

Rounds both inline end corners (border-start-end-radius and border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-e($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-e(lg);
}

Compiled CSS

.tab {
  border-start-end-radius: var(--wu-radius-lg);
  border-end-end-radius: var(--wu-radius-lg);
}

See also: rounded. Source: utilities/_borders.scss:438

`rounded-ss` mixin

Rounds the block start, inline start corner (border-start-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-ss($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-ss(lg);
}

Compiled CSS

.tab {
  border-start-start-radius: var(--wu-radius-lg);
}

border-start-start-radius on MDN

See also: rounded. Source: utilities/_borders.scss:453

`rounded-se` mixin

Rounds the block start, inline end corner (border-start-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-se($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-se(lg);
}

Compiled CSS

.tab {
  border-start-end-radius: var(--wu-radius-lg);
}

border-start-end-radius on MDN

See also: rounded. Source: utilities/_borders.scss:465

`rounded-es` mixin

Rounds the block end, inline start corner (border-end-start-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-es($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-es(lg);
}

Compiled CSS

.tab {
  border-end-start-radius: var(--wu-radius-lg);
}

border-end-start-radius on MDN

See also: rounded. Source: utilities/_borders.scss:477

`rounded-ee` mixin

Rounds the block end, inline end corner (border-end-end-radius) with a $border-radii key (md when omitted) or a raw length.

@mixin rounded-ee($val: null)

Parameter	Type	Default	Description
`$val`	`String\|Length\|Null`	`null`	A $border-radii key (xs, sm, md, lg, xl, 2xl, full, none), a length, calc() or var()

Example

.tab {
  @include rounded-ee(lg);
}

Compiled CSS

.tab {
  border-end-end-radius: var(--wu-radius-lg);
}

border-end-end-radius on MDN

See also: rounded. Source: utilities/_borders.scss:489

`border-style` mixin

Sets --wu-border-style, which changes the style of borders drawn by border(), border-top() and the other side mixins on the same element.

Include it after the border mixin, which also writes --wu-border-style; an unknown style raises an error.

@mixin border-style($style)

Parameter	Type	Default	Description
`$style`	`String`	Required	solid, dashed, dotted, double, none, a CSS-wide keyword or var()

Output: --wu-border-style only; it draws nothing without a border mixin or class

Example

.dropzone {
  @include border(2);
  @include border-style(dashed);
}

Compiled CSS

.dropzone {
  border-width: var(--wu-border-width-2);
  border-style: var(--wu-border-style);
  border-color: var(--wu-border-regular);
  --wu-border-style: solid;
  --wu-border-style: dashed;
}

See also: border. Source: utilities/_borders.scss:506

`border-color` mixin

Sets border-color from a role, palette name, theme word or color, emitting the matching var(--wu-*) token.

Roles give their fill {role} and palette names give {hue}-500; a shade outside 50 to 950 raises an error, and a raw color with a shade is shaded at compile time.

@mixin border-color($color, $shade: null)

Parameter	Type	Default	Description
`$color`	`String\|Color`	Required	A role (brand, danger), role state (danger-border, brand-hover), palette name (red), theme word (regular, strong, control, control-hover, focus), color value or var()
`$shade`	`Number\|Null`	`null`	A shade stop (50, 100 to 900, 950) for a role or palette name

Example 1

.card {
  @include border-color(regular); // var(--wu-border-regular)
}

Compiled CSS

.card {
  border-color: var(--wu-border-regular);
}

Example 2

.alert {
  @include apply(border(1), border-color(danger-border));
}

Compiled CSS

.alert {
  border-width: var(--wu-border-width-1);
  border-style: var(--wu-border-style);
  border-color: var(--wu-border-regular);
  --wu-border-style: solid;
  border-color: var(--wu-danger-border);
}

Example 3

.tag {
  @include border-color(purple, 300); // var(--wu-purple-300)
}

Compiled CSS

.tag {
  border-color: var(--wu-purple-300);
}

border-color on MDN

See also: border, bg, text-color. Source: utilities/_borders.scss:531

`border-all` mixin

Draws a border on all sides with a width, a style and a color, all required; the same output as border() with every argument given.

The style goes through --wu-border-style, so border-style() and .border-{style} classes change it, as with border().

@mixin border-all($width, $style, $color)

Parameter	Type	Default	Description
`$width`	`Number\|Length`	Required	A $border-widths key (0, 1, 2, 4, 8) giving var(--wu-border-width-*), or a length
`$style`	`String`	Required	solid, dashed, dotted, double, none, a CSS-wide keyword or var(); written to --wu-border-style
`$color`	`String\|Color`	Required	A role, palette name, theme word, color value or var(); resolved like border-color()

Example

.panel {
  @include border-all(1, solid, strong);
}

Compiled CSS

.panel {
  border-width: var(--wu-border-width-1);
  border-style: var(--wu-border-style);
  border-color: var(--wu-border-strong);
  --wu-border-style: solid;
}

See also: border. Source: utilities/_borders.scss:546

`pill` mixin

Rounds all corners fully with the full radius token, var(--wu-radius-full).

@mixin pill

Example

.badge {
  @include apply(pill, px(3));
}

Compiled CSS

.badge {
  border-radius: var(--wu-radius-full);
  padding-inline: var(--wu-space-3);
}

See also: rounded. Source: utilities/_borders.scss:556

Border mixins

Mixins and functions

get-rounded-value() function

border mixin

border-top mixin

border-right mixin

border-bottom mixin

border-left mixin

border-start mixin

border-end mixin

rounded mixin

rounded-t mixin

rounded-r mixin

rounded-b mixin

rounded-l mixin

rounded-tl mixin

rounded-tr mixin

rounded-br mixin

rounded-bl mixin

rounded-s mixin

rounded-e mixin

rounded-ss mixin

rounded-se mixin

rounded-es mixin

rounded-ee mixin

border-style mixin

border-color mixin

border-all mixin

pill mixin

`get-rounded-value()` function

`border` mixin

`border-top` mixin

`border-right` mixin

`border-bottom` mixin

`border-left` mixin

`border-start` mixin

`border-end` mixin

`rounded` mixin

`rounded-t` mixin

`rounded-r` mixin

`rounded-b` mixin

`rounded-l` mixin

`rounded-tl` mixin

`rounded-tr` mixin

`rounded-br` mixin

`rounded-bl` mixin

`rounded-s` mixin

`rounded-e` mixin

`rounded-ss` mixin

`rounded-se` mixin

`rounded-es` mixin

`rounded-ee` mixin

`border-style` mixin

`border-color` mixin

`border-all` mixin

`pill` mixin