0build.dev
Choose a layout

border-radius

Report an Issue
Class Description

rounded

Sets border-radius on all corners via --rounded. E.g. 8px, 50%.

CSS Rules 

.rounded {
  border-radius: var(--rounded);
}

Usage

The .rounded class is flagged as a value-driven selector. The variable --rounded is required. 
<element class="rounded" style="--rounded: /* value */;" />

Responsive

Prefix .rounded utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded" style="--md-rounded: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded:hover" style="--rounded-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded::before" style="--rounded-before: /* value */;" />

<element class="content-after rounded::after" style="--rounded-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded=value" />

<!-- Output -->
<element class="rounded" style="--rounded: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded Sets border-radius on all corners via --rounded. E.g. 8px, 50%.

rounded-s

Rounds the inline-start side corners via --rounded-s. Logical for RTL/LTR-aware layouts.

CSS Rules 

.rounded-s {
  border-start-start-radius: var(--rounded-s);
  border-end-start-radius: var(--rounded-s);
}

Usage

The .rounded-s class is flagged as a value-driven selector. The variables --rounded-s and --rounded-s are required. 
<element
  class="rounded-s"
  style="
    --rounded-s: /* value */;
    --rounded-s: /* value */;
  "
></element>

Responsive

Prefix .rounded-s utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-s"
  style="
    --md-rounded-s: /* value */;
    --md-rounded-s: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-s:hover"
  style="
    --rounded-s-hover: /* value */;
    --rounded-s-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-s::before"
  style="
    --rounded-s-before: /* value */;
    --rounded-s-before: /* value */;
  "
></element>

<element
  class="content-after rounded-s::after"
  style="
    --rounded-s-after: /* value */;
    --rounded-s-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-s=value" />

<!-- Output -->
<element class="rounded-s" style="--rounded-s: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-s Rounds the inline-start side corners via --rounded-s. Logical for RTL/LTR-aware layouts.

rounded-e

Rounds the inline-end side corners via --rounded-e. Logical for RTL/LTR-aware layouts.

CSS Rules 

.rounded-e {
  border-start-end-radius: var(--rounded-e);
  border-end-end-radius: var(--rounded-e);
}

Usage

The .rounded-e class is flagged as a value-driven selector. The variables --rounded-e and --rounded-e are required. 
<element
  class="rounded-e"
  style="
    --rounded-e: /* value */;
    --rounded-e: /* value */;
  "
></element>

Responsive

Prefix .rounded-e utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-e"
  style="
    --md-rounded-e: /* value */;
    --md-rounded-e: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-e:hover"
  style="
    --rounded-e-hover: /* value */;
    --rounded-e-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-e::before"
  style="
    --rounded-e-before: /* value */;
    --rounded-e-before: /* value */;
  "
></element>

<element
  class="content-after rounded-e::after"
  style="
    --rounded-e-after: /* value */;
    --rounded-e-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-e=value" />

<!-- Output -->
<element class="rounded-e" style="--rounded-e: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-e Rounds the inline-end side corners via --rounded-e. Logical for RTL/LTR-aware layouts.

rounded-t

Sets border-radius on top corners via --rounded-t.

CSS Rules 

.rounded-t {
  border-top-left-radius: var(--rounded-t);
  border-top-right-radius: var(--rounded-t);
}

Usage

The .rounded-t class is flagged as a value-driven selector. The variables --rounded-t and --rounded-t are required. 
<element
  class="rounded-t"
  style="
    --rounded-t: /* value */;
    --rounded-t: /* value */;
  "
></element>

Responsive

Prefix .rounded-t utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-t"
  style="
    --md-rounded-t: /* value */;
    --md-rounded-t: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-t:hover"
  style="
    --rounded-t-hover: /* value */;
    --rounded-t-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-t::before"
  style="
    --rounded-t-before: /* value */;
    --rounded-t-before: /* value */;
  "
></element>

<element
  class="content-after rounded-t::after"
  style="
    --rounded-t-after: /* value */;
    --rounded-t-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-t=value" />

<!-- Output -->
<element class="rounded-t" style="--rounded-t: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-t Sets border-radius on top corners via --rounded-t.

rounded-r

Rounds both right-side corners via --rounded-r. Physical direction, not logical.

CSS Rules 

.rounded-r {
  border-top-right-radius: var(--rounded-r);
  border-bottom-right-radius: var(--rounded-r);
}

Usage

The .rounded-r class is flagged as a value-driven selector. The variables --rounded-r and --rounded-r are required. 
<element
  class="rounded-r"
  style="
    --rounded-r: /* value */;
    --rounded-r: /* value */;
  "
></element>

Responsive

Prefix .rounded-r utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-r"
  style="
    --md-rounded-r: /* value */;
    --md-rounded-r: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-r:hover"
  style="
    --rounded-r-hover: /* value */;
    --rounded-r-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-r::before"
  style="
    --rounded-r-before: /* value */;
    --rounded-r-before: /* value */;
  "
></element>

<element
  class="content-after rounded-r::after"
  style="
    --rounded-r-after: /* value */;
    --rounded-r-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-r=value" />

<!-- Output -->
<element class="rounded-r" style="--rounded-r: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-r Rounds both right-side corners via --rounded-r. Physical direction, not logical.

rounded-b

Sets border-radius on bottom corners via --rounded-b.

CSS Rules 

.rounded-b {
  border-bottom-right-radius: var(--rounded-b);
  border-bottom-left-radius: var(--rounded-b);
}

Usage

The .rounded-b class is flagged as a value-driven selector. The variables --rounded-b and --rounded-b are required. 
<element
  class="rounded-b"
  style="
    --rounded-b: /* value */;
    --rounded-b: /* value */;
  "
></element>

Responsive

Prefix .rounded-b utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-b"
  style="
    --md-rounded-b: /* value */;
    --md-rounded-b: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-b:hover"
  style="
    --rounded-b-hover: /* value */;
    --rounded-b-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-b::before"
  style="
    --rounded-b-before: /* value */;
    --rounded-b-before: /* value */;
  "
></element>

<element
  class="content-after rounded-b::after"
  style="
    --rounded-b-after: /* value */;
    --rounded-b-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-b=value" />

<!-- Output -->
<element class="rounded-b" style="--rounded-b: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-b Sets border-radius on bottom corners via --rounded-b.

rounded-l

Rounds both left-side corners via --rounded-l. Physical direction, not logical.

CSS Rules 

.rounded-l {
  border-top-left-radius: var(--rounded-l);
  border-bottom-left-radius: var(--rounded-l);
}

Usage

The .rounded-l class is flagged as a value-driven selector. The variables --rounded-l and --rounded-l are required. 
<element
  class="rounded-l"
  style="
    --rounded-l: /* value */;
    --rounded-l: /* value */;
  "
></element>

Responsive

Prefix .rounded-l utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element
  class="md:rounded-l"
  style="
    --md-rounded-l: /* value */;
    --md-rounded-l: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element
  class="rounded-l:hover"
  style="
    --rounded-l-hover: /* value */;
    --rounded-l-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element
  class="content-before rounded-l::before"
  style="
    --rounded-l-before: /* value */;
    --rounded-l-before: /* value */;
  "
></element>

<element
  class="content-after rounded-l::after"
  style="
    --rounded-l-after: /* value */;
    --rounded-l-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-l=value" />

<!-- Output -->
<element class="rounded-l" style="--rounded-l: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-l Rounds both left-side corners via --rounded-l. Physical direction, not logical.

rounded-ss

Rounds only the start-start corner. Accepts a custom radius value.

CSS Rules 

.rounded-ss {
  border-start-start-radius: var(--rounded-ss);
}

Usage

The .rounded-ss class is flagged as a value-driven selector. The variable --rounded-ss is required. 
<element class="rounded-ss" style="--rounded-ss: /* value */;" />

Responsive

Prefix .rounded-ss utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss" style="--md-rounded-ss: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss:hover" style="--rounded-ss-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss::before" style="--rounded-ss-before: /* value */;" />

<element class="content-after rounded-ss::after" style="--rounded-ss-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-ss=value" />

<!-- Output -->
<element class="rounded-ss" style="--rounded-ss: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-ss Rounds only the start-start corner. Accepts a custom radius value.

rounded-se

Rounds only the start-end corner. Accepts a custom radius value.

CSS Rules 

.rounded-se {
  border-start-end-radius: var(--rounded-se);
}

Usage

The .rounded-se class is flagged as a value-driven selector. The variable --rounded-se is required. 
<element class="rounded-se" style="--rounded-se: /* value */;" />

Responsive

Prefix .rounded-se utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se" style="--md-rounded-se: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se:hover" style="--rounded-se-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se::before" style="--rounded-se-before: /* value */;" />

<element class="content-after rounded-se::after" style="--rounded-se-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-se=value" />

<!-- Output -->
<element class="rounded-se" style="--rounded-se: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-se Rounds only the start-end corner. Accepts a custom radius value.

rounded-ee

Rounds only the end-end corner. Accepts a custom radius value.

CSS Rules 

.rounded-ee {
  border-end-end-radius: var(--rounded-ee);
}

Usage

The .rounded-ee class is flagged as a value-driven selector. The variable --rounded-ee is required. 
<element class="rounded-ee" style="--rounded-ee: /* value */;" />

Responsive

Prefix .rounded-ee utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee" style="--md-rounded-ee: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee:hover" style="--rounded-ee-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee::before" style="--rounded-ee-before: /* value */;" />

<element class="content-after rounded-ee::after" style="--rounded-ee-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-ee=value" />

<!-- Output -->
<element class="rounded-ee" style="--rounded-ee: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-ee Rounds only the end-end corner. Accepts a custom radius value.

rounded-es

Rounds only the end-start corner. Accepts a custom radius value.

CSS Rules 

.rounded-es {
  border-end-start-radius: var(--rounded-es);
}

Usage

The .rounded-es class is flagged as a value-driven selector. The variable --rounded-es is required. 
<element class="rounded-es" style="--rounded-es: /* value */;" />

Responsive

Prefix .rounded-es utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es" style="--md-rounded-es: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es:hover" style="--rounded-es-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es::before" style="--rounded-es-before: /* value */;" />

<element class="content-after rounded-es::after" style="--rounded-es-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-es=value" />

<!-- Output -->
<element class="rounded-es" style="--rounded-es: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-es Rounds only the end-start corner. Accepts a custom radius value.

rounded-tl

Rounds only the top-left corner. Accepts a custom radius value.

CSS Rules 

.rounded-tl {
  border-top-left-radius: var(--rounded-tl);
}

Usage

The .rounded-tl class is flagged as a value-driven selector. The variable --rounded-tl is required. 
<element class="rounded-tl" style="--rounded-tl: /* value */;" />

Responsive

Prefix .rounded-tl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl" style="--md-rounded-tl: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl:hover" style="--rounded-tl-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl::before" style="--rounded-tl-before: /* value */;" />

<element class="content-after rounded-tl::after" style="--rounded-tl-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-tl=value" />

<!-- Output -->
<element class="rounded-tl" style="--rounded-tl: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-tl Rounds only the top-left corner. Accepts a custom radius value.

rounded-tr

Rounds only the top-right corner. Accepts a custom radius value.

CSS Rules 

.rounded-tr {
  border-top-right-radius: var(--rounded-tr);
}

Usage

The .rounded-tr class is flagged as a value-driven selector. The variable --rounded-tr is required. 
<element class="rounded-tr" style="--rounded-tr: /* value */;" />

Responsive

Prefix .rounded-tr utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr" style="--md-rounded-tr: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr:hover" style="--rounded-tr-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr::before" style="--rounded-tr-before: /* value */;" />

<element class="content-after rounded-tr::after" style="--rounded-tr-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-tr=value" />

<!-- Output -->
<element class="rounded-tr" style="--rounded-tr: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-tr Rounds only the top-right corner. Accepts a custom radius value.

rounded-br

Rounds only the bottom-right corner. Accepts a custom radius value.

CSS Rules 

.rounded-br {
  border-bottom-right-radius: var(--rounded-br);
}

Usage

The .rounded-br class is flagged as a value-driven selector. The variable --rounded-br is required. 
<element class="rounded-br" style="--rounded-br: /* value */;" />

Responsive

Prefix .rounded-br utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br" style="--md-rounded-br: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br:hover" style="--rounded-br-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br::before" style="--rounded-br-before: /* value */;" />

<element class="content-after rounded-br::after" style="--rounded-br-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-br=value" />

<!-- Output -->
<element class="rounded-br" style="--rounded-br: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-br Rounds only the bottom-right corner. Accepts a custom radius value.

rounded-bl

Rounds only the bottom-left corner. Accepts a custom radius value.

CSS Rules 

.rounded-bl {
  border-bottom-left-radius: var(--rounded-bl);
}

Usage

The .rounded-bl class is flagged as a value-driven selector. The variable --rounded-bl is required. 
<element class="rounded-bl" style="--rounded-bl: /* value */;" />

Responsive

Prefix .rounded-bl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl" style="--md-rounded-bl: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl:hover" style="--rounded-bl-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl::before" style="--rounded-bl-before: /* value */;" />

<element class="content-after rounded-bl::after" style="--rounded-bl-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style. 

<!-- Input -->
<element class="rounded-bl=value" />

<!-- Output -->
<element class="rounded-bl" style="--rounded-bl: value;" />

CLS Alert

This feature may cause CLS (Cumulative Layout Shift). Make sure to include a z-not-ready class in your <head> tag.

.rounded-bl Rounds only the bottom-left corner. Accepts a custom radius value.

rounded-xs

Applies extra-small radius via --radius-xs to all corners.

CSS Rules 

.rounded-xs {
  border-radius: var(--radius-xs);
}

Usage 

<element class="rounded-xs" />

Responsive

Prefix .rounded-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-xs::before" />

<element class="content-after rounded-xs::after" />
 .rounded-xs Applies extra-small radius via --radius-xs to all corners.

rounded-sm

Sets border-radius to sm preset.

CSS Rules 

.rounded-sm {
  border-radius: var(--radius-sm);
}

Usage 

<element class="rounded-sm" />

Responsive

Prefix .rounded-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-sm::before" />

<element class="content-after rounded-sm::after" />
 .rounded-sm Sets border-radius to sm preset.

rounded-md

Sets border-radius to md preset.

CSS Rules 

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

Usage 

<element class="rounded-md" />

Responsive

Prefix .rounded-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-md::before" />

<element class="content-after rounded-md::after" />
 .rounded-md Sets border-radius to md preset.

rounded-lg

Sets border-radius to lg preset.

CSS Rules 

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

Usage 

<element class="rounded-lg" />

Responsive

Prefix .rounded-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-lg::before" />

<element class="content-after rounded-lg::after" />
 .rounded-lg Sets border-radius to lg preset.

rounded-xl

Sets border-radius to xl preset.

CSS Rules 

.rounded-xl {
  border-radius: var(--radius-xl);
}

Usage 

<element class="rounded-xl" />

Responsive

Prefix .rounded-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-xl::before" />

<element class="content-after rounded-xl::after" />
 .rounded-xl Sets border-radius to xl preset.

rounded-2xl

Applies very large radius via --radius-2xl to all corners.

CSS Rules 

.rounded-2xl {
  border-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-2xl" />

Responsive

Prefix .rounded-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-2xl::before" />

<element class="content-after rounded-2xl::after" />
 .rounded-2xl Applies very large radius via --radius-2xl to all corners.

rounded-3xl

Applies larger radius via --radius-3xl to all corners.

CSS Rules 

.rounded-3xl {
  border-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-3xl" />

Responsive

Prefix .rounded-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-3xl::before" />

<element class="content-after rounded-3xl::after" />
 .rounded-3xl Applies larger radius via --radius-3xl to all corners.

rounded-4xl

Applies largest radius via --radius-4xl to all corners.

CSS Rules 

.rounded-4xl {
  border-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-4xl" />

Responsive

Prefix .rounded-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-4xl::before" />

<element class="content-after rounded-4xl::after" />
 .rounded-4xl Applies largest radius via --radius-4xl to all corners.

rounded-none

Removes border-radius.

CSS Rules 

.rounded-none {
  border-radius: 0;
}

Usage 

<element class="rounded-none" />

Responsive

Prefix .rounded-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-none::before" />

<element class="content-after rounded-none::after" />
 .rounded-none Removes border-radius.

rounded-full

Sets border-radius: 9999px. Creates circles or pill shapes.

CSS Rules 

.rounded-full {
  border-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-full" />

Responsive

Prefix .rounded-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-full::before" />

<element class="content-after rounded-full::after" />
 .rounded-full Sets border-radius: 9999px. Creates circles or pill shapes.

rounded-s-xs

Applies extra-small radius to inline-start corners via --radius-xs. Logical start edge.

CSS Rules 

.rounded-s-xs {
  border-start-start-radius: var(--radius-xs);
  border-end-start-radius: var(--radius-xs);
}

Usage 

<element class="rounded-s-xs" />

Responsive

Prefix .rounded-s-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-xs::before" />

<element class="content-after rounded-s-xs::after" />
 .rounded-s-xs Applies extra-small radius to inline-start corners via --radius-xs. Logical start edge.

rounded-s-sm

Applies small radius to inline-start corners via --radius-sm. Logical start edge.

CSS Rules 

.rounded-s-sm {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}

Usage 

<element class="rounded-s-sm" />

Responsive

Prefix .rounded-s-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-sm::before" />

<element class="content-after rounded-s-sm::after" />
 .rounded-s-sm Applies small radius to inline-start corners via --radius-sm. Logical start edge.

rounded-s-md

Applies medium radius to inline-start corners via --radius-md. Logical start edge.

CSS Rules 

.rounded-s-md {
  border-start-start-radius: var(--radius-md);
  border-end-start-radius: var(--radius-md);
}

Usage 

<element class="rounded-s-md" />

Responsive

Prefix .rounded-s-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-md::before" />

<element class="content-after rounded-s-md::after" />
 .rounded-s-md Applies medium radius to inline-start corners via --radius-md. Logical start edge.

rounded-s-lg

Applies large radius to inline-start corners via --radius-lg. Logical start edge.

CSS Rules 

.rounded-s-lg {
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
}

Usage 

<element class="rounded-s-lg" />

Responsive

Prefix .rounded-s-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-lg::before" />

<element class="content-after rounded-s-lg::after" />
 .rounded-s-lg Applies large radius to inline-start corners via --radius-lg. Logical start edge.

rounded-s-xl

Applies extra-large radius to inline-start corners via --radius-xl. Logical start edge.

CSS Rules 

.rounded-s-xl {
  border-start-start-radius: var(--radius-xl);
  border-end-start-radius: var(--radius-xl);
}

Usage 

<element class="rounded-s-xl" />

Responsive

Prefix .rounded-s-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-xl::before" />

<element class="content-after rounded-s-xl::after" />
 .rounded-s-xl Applies extra-large radius to inline-start corners via --radius-xl. Logical start edge.

rounded-s-2xl

Applies very large radius to inline-start corners via --radius-2xl. Logical start edge.

CSS Rules 

.rounded-s-2xl {
  border-start-start-radius: var(--radius-2xl);
  border-end-start-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-s-2xl" />

Responsive

Prefix .rounded-s-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-2xl::before" />

<element class="content-after rounded-s-2xl::after" />
 .rounded-s-2xl Applies very large radius to inline-start corners via --radius-2xl. Logical start edge.

rounded-s-3xl

Applies larger radius to inline-start corners via --radius-3xl. Logical start edge.

CSS Rules 

.rounded-s-3xl {
  border-start-start-radius: var(--radius-3xl);
  border-end-start-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-s-3xl" />

Responsive

Prefix .rounded-s-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-3xl::before" />

<element class="content-after rounded-s-3xl::after" />
 .rounded-s-3xl Applies larger radius to inline-start corners via --radius-3xl. Logical start edge.

rounded-s-4xl

Applies largest radius to inline-start corners via --radius-4xl. Logical start edge.

CSS Rules 

.rounded-s-4xl {
  border-start-start-radius: var(--radius-4xl);
  border-end-start-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-s-4xl" />

Responsive

Prefix .rounded-s-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-4xl::before" />

<element class="content-after rounded-s-4xl::after" />
 .rounded-s-4xl Applies largest radius to inline-start corners via --radius-4xl. Logical start edge.

rounded-s-none

Removes radius from inline-start corners.

CSS Rules 

.rounded-s-none {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

Usage 

<element class="rounded-s-none" />

Responsive

Prefix .rounded-s-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-none::before" />

<element class="content-after rounded-s-none::after" />
 .rounded-s-none Removes radius from inline-start corners.

rounded-s-full

Makes inline-start corners fully rounded using an infinite radius.

CSS Rules 

.rounded-s-full {
  border-start-start-radius: calc(infinity * 1px);
  border-end-start-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-s-full" />

Responsive

Prefix .rounded-s-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-s-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-s-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-s-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-s-full::before" />

<element class="content-after rounded-s-full::after" />
 .rounded-s-full Makes inline-start corners fully rounded using an infinite radius.

rounded-e-xs

Applies extra-small radius to inline-end corners via --radius-xs. Logical end edge.

CSS Rules 

.rounded-e-xs {
  border-start-end-radius: var(--radius-xs);
  border-end-end-radius: var(--radius-xs);
}

Usage 

<element class="rounded-e-xs" />

Responsive

Prefix .rounded-e-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-xs::before" />

<element class="content-after rounded-e-xs::after" />
 .rounded-e-xs Applies extra-small radius to inline-end corners via --radius-xs. Logical end edge.

rounded-e-sm

Applies small radius to inline-end corners via --radius-sm. Logical end edge.

CSS Rules 

.rounded-e-sm {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

Usage 

<element class="rounded-e-sm" />

Responsive

Prefix .rounded-e-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-sm::before" />

<element class="content-after rounded-e-sm::after" />
 .rounded-e-sm Applies small radius to inline-end corners via --radius-sm. Logical end edge.

rounded-e-md

Applies medium radius to inline-end corners via --radius-md. Logical end edge.

CSS Rules 

.rounded-e-md {
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
}

Usage 

<element class="rounded-e-md" />

Responsive

Prefix .rounded-e-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-md::before" />

<element class="content-after rounded-e-md::after" />
 .rounded-e-md Applies medium radius to inline-end corners via --radius-md. Logical end edge.

rounded-e-lg

Applies large radius to inline-end corners via --radius-lg. Logical end edge.

CSS Rules 

.rounded-e-lg {
  border-start-end-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}

Usage 

<element class="rounded-e-lg" />

Responsive

Prefix .rounded-e-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-lg::before" />

<element class="content-after rounded-e-lg::after" />
 .rounded-e-lg Applies large radius to inline-end corners via --radius-lg. Logical end edge.

rounded-e-xl

Applies extra-large radius to inline-end corners via --radius-xl. Logical end edge.

CSS Rules 

.rounded-e-xl {
  border-start-end-radius: var(--radius-xl);
  border-end-end-radius: var(--radius-xl);
}

Usage 

<element class="rounded-e-xl" />

Responsive

Prefix .rounded-e-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-xl::before" />

<element class="content-after rounded-e-xl::after" />
 .rounded-e-xl Applies extra-large radius to inline-end corners via --radius-xl. Logical end edge.

rounded-e-2xl

Applies very large radius to inline-end corners via --radius-2xl. Logical end edge.

CSS Rules 

.rounded-e-2xl {
  border-start-end-radius: var(--radius-2xl);
  border-end-end-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-e-2xl" />

Responsive

Prefix .rounded-e-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-2xl::before" />

<element class="content-after rounded-e-2xl::after" />
 .rounded-e-2xl Applies very large radius to inline-end corners via --radius-2xl. Logical end edge.

rounded-e-3xl

Applies larger radius to inline-end corners via --radius-3xl. Logical end edge.

CSS Rules 

.rounded-e-3xl {
  border-start-end-radius: var(--radius-3xl);
  border-end-end-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-e-3xl" />

Responsive

Prefix .rounded-e-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-3xl::before" />

<element class="content-after rounded-e-3xl::after" />
 .rounded-e-3xl Applies larger radius to inline-end corners via --radius-3xl. Logical end edge.

rounded-e-4xl

Applies largest radius to inline-end corners via --radius-4xl. Logical end edge.

CSS Rules 

.rounded-e-4xl {
  border-start-end-radius: var(--radius-4xl);
  border-end-end-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-e-4xl" />

Responsive

Prefix .rounded-e-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-4xl::before" />

<element class="content-after rounded-e-4xl::after" />
 .rounded-e-4xl Applies largest radius to inline-end corners via --radius-4xl. Logical end edge.

rounded-e-none

Removes radius from inline-end corners.

CSS Rules 

.rounded-e-none {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

Usage 

<element class="rounded-e-none" />

Responsive

Prefix .rounded-e-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-none::before" />

<element class="content-after rounded-e-none::after" />
 .rounded-e-none Removes radius from inline-end corners.

rounded-e-full

Makes inline-end corners fully rounded using an infinite radius.

CSS Rules 

.rounded-e-full {
  border-start-end-radius: calc(infinity * 1px);
  border-end-end-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-e-full" />

Responsive

Prefix .rounded-e-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-e-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-e-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-e-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-e-full::before" />

<element class="content-after rounded-e-full::after" />
 .rounded-e-full Makes inline-end corners fully rounded using an infinite radius.

rounded-t-xs

Applies extra-small radius to top-left and top-right corners via --radius-xs.

CSS Rules 

.rounded-t-xs {
  border-top-left-radius: var(--radius-xs);
  border-top-right-radius: var(--radius-xs);
}

Usage 

<element class="rounded-t-xs" />

Responsive

Prefix .rounded-t-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-xs::before" />

<element class="content-after rounded-t-xs::after" />
 .rounded-t-xs Applies extra-small radius to top-left and top-right corners via --radius-xs.

rounded-t-sm

Applies small radius to top-left and top-right corners via --radius-sm.

CSS Rules 

.rounded-t-sm {
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

Usage 

<element class="rounded-t-sm" />

Responsive

Prefix .rounded-t-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-sm::before" />

<element class="content-after rounded-t-sm::after" />
 .rounded-t-sm Applies small radius to top-left and top-right corners via --radius-sm.

rounded-t-md

Applies medium radius to top-left and top-right corners via --radius-md.

CSS Rules 

.rounded-t-md {
  border-top-left-radius: var(--radius-md);
  border-top-right-radius: var(--radius-md);
}

Usage 

<element class="rounded-t-md" />

Responsive

Prefix .rounded-t-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-md::before" />

<element class="content-after rounded-t-md::after" />
 .rounded-t-md Applies medium radius to top-left and top-right corners via --radius-md.

rounded-t-lg

Applies large radius to top-left and top-right corners via --radius-lg.

CSS Rules 

.rounded-t-lg {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

Usage 

<element class="rounded-t-lg" />

Responsive

Prefix .rounded-t-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-lg::before" />

<element class="content-after rounded-t-lg::after" />
 .rounded-t-lg Applies large radius to top-left and top-right corners via --radius-lg.

rounded-t-xl

Applies extra-large radius to top-left and top-right corners via --radius-xl.

CSS Rules 

.rounded-t-xl {
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

Usage 

<element class="rounded-t-xl" />

Responsive

Prefix .rounded-t-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-xl::before" />

<element class="content-after rounded-t-xl::after" />
 .rounded-t-xl Applies extra-large radius to top-left and top-right corners via --radius-xl.

rounded-t-2xl

Applies very large radius to top-left and top-right corners via --radius-2xl.

CSS Rules 

.rounded-t-2xl {
  border-top-left-radius: var(--radius-2xl);
  border-top-right-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-t-2xl" />

Responsive

Prefix .rounded-t-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-2xl::before" />

<element class="content-after rounded-t-2xl::after" />
 .rounded-t-2xl Applies very large radius to top-left and top-right corners via --radius-2xl.

rounded-t-3xl

Applies larger radius to top-left and top-right corners via --radius-3xl.

CSS Rules 

.rounded-t-3xl {
  border-top-left-radius: var(--radius-3xl);
  border-top-right-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-t-3xl" />

Responsive

Prefix .rounded-t-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-3xl::before" />

<element class="content-after rounded-t-3xl::after" />
 .rounded-t-3xl Applies larger radius to top-left and top-right corners via --radius-3xl.

rounded-t-4xl

Applies largest radius to top-left and top-right corners via --radius-4xl.

CSS Rules 

.rounded-t-4xl {
  border-top-left-radius: var(--radius-4xl);
  border-top-right-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-t-4xl" />

Responsive

Prefix .rounded-t-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-4xl::before" />

<element class="content-after rounded-t-4xl::after" />
 .rounded-t-4xl Applies largest radius to top-left and top-right corners via --radius-4xl.

rounded-t-none

Removes radius from top-left and top-right corners.

CSS Rules 

.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

Usage 

<element class="rounded-t-none" />

Responsive

Prefix .rounded-t-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-none::before" />

<element class="content-after rounded-t-none::after" />
 .rounded-t-none Removes radius from top-left and top-right corners.

rounded-t-full

Makes top-left and top-right corners fully rounded using an infinite radius.

CSS Rules 

.rounded-t-full {
  border-top-left-radius: calc(infinity * 1px);
  border-top-right-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-t-full" />

Responsive

Prefix .rounded-t-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-t-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-t-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-t-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-t-full::before" />

<element class="content-after rounded-t-full::after" />
 .rounded-t-full Makes top-left and top-right corners fully rounded using an infinite radius.

rounded-r-xs

Applies extra-small radius to top-right and bottom-right corners via --radius-xs.

CSS Rules 

.rounded-r-xs {
  border-top-right-radius: var(--radius-xs);
  border-bottom-right-radius: var(--radius-xs);
}

Usage 

<element class="rounded-r-xs" />

Responsive

Prefix .rounded-r-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-xs::before" />

<element class="content-after rounded-r-xs::after" />
 .rounded-r-xs Applies extra-small radius to top-right and bottom-right corners via --radius-xs.

rounded-r-sm

Applies small radius to top-right and bottom-right corners via --radius-sm.

CSS Rules 

.rounded-r-sm {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

Usage 

<element class="rounded-r-sm" />

Responsive

Prefix .rounded-r-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-sm::before" />

<element class="content-after rounded-r-sm::after" />
 .rounded-r-sm Applies small radius to top-right and bottom-right corners via --radius-sm.

rounded-r-md

Applies medium radius to top-right and bottom-right corners via --radius-md.

CSS Rules 

.rounded-r-md {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}

Usage 

<element class="rounded-r-md" />

Responsive

Prefix .rounded-r-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-md::before" />

<element class="content-after rounded-r-md::after" />
 .rounded-r-md Applies medium radius to top-right and bottom-right corners via --radius-md.

rounded-r-lg

Applies large radius to top-right and bottom-right corners via --radius-lg.

CSS Rules 

.rounded-r-lg {
  border-top-right-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

Usage 

<element class="rounded-r-lg" />

Responsive

Prefix .rounded-r-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-lg::before" />

<element class="content-after rounded-r-lg::after" />
 .rounded-r-lg Applies large radius to top-right and bottom-right corners via --radius-lg.

rounded-r-xl

Applies extra-large radius to top-right and bottom-right corners via --radius-xl.

CSS Rules 

.rounded-r-xl {
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}

Usage 

<element class="rounded-r-xl" />

Responsive

Prefix .rounded-r-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-xl::before" />

<element class="content-after rounded-r-xl::after" />
 .rounded-r-xl Applies extra-large radius to top-right and bottom-right corners via --radius-xl.

rounded-r-2xl

Applies very large radius to top-right and bottom-right corners via --radius-2xl.

CSS Rules 

.rounded-r-2xl {
  border-top-right-radius: var(--radius-2xl);
  border-bottom-right-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-r-2xl" />

Responsive

Prefix .rounded-r-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-2xl::before" />

<element class="content-after rounded-r-2xl::after" />
 .rounded-r-2xl Applies very large radius to top-right and bottom-right corners via --radius-2xl.

rounded-r-3xl

Applies larger radius to top-right and bottom-right corners via --radius-3xl.

CSS Rules 

.rounded-r-3xl {
  border-top-right-radius: var(--radius-3xl);
  border-bottom-right-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-r-3xl" />

Responsive

Prefix .rounded-r-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-3xl::before" />

<element class="content-after rounded-r-3xl::after" />
 .rounded-r-3xl Applies larger radius to top-right and bottom-right corners via --radius-3xl.

rounded-r-4xl

Applies largest radius to top-right and bottom-right corners via --radius-4xl.

CSS Rules 

.rounded-r-4xl {
  border-top-right-radius: var(--radius-4xl);
  border-bottom-right-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-r-4xl" />

Responsive

Prefix .rounded-r-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-4xl::before" />

<element class="content-after rounded-r-4xl::after" />
 .rounded-r-4xl Applies largest radius to top-right and bottom-right corners via --radius-4xl.

rounded-r-none

Removes radius from top-right and bottom-right corners.

CSS Rules 

.rounded-r-none {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

Usage 

<element class="rounded-r-none" />

Responsive

Prefix .rounded-r-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-none::before" />

<element class="content-after rounded-r-none::after" />
 .rounded-r-none Removes radius from top-right and bottom-right corners.

rounded-r-full

Makes top-right and bottom-right corners fully rounded using an infinite radius.

CSS Rules 

.rounded-r-full {
  border-top-right-radius: calc(infinity * 1px);
  border-bottom-right-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-r-full" />

Responsive

Prefix .rounded-r-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-r-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-r-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-r-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-r-full::before" />

<element class="content-after rounded-r-full::after" />
 .rounded-r-full Makes top-right and bottom-right corners fully rounded using an infinite radius.

rounded-b-xs

Applies extra-small radius to bottom-left and bottom-right corners via --radius-xs.

CSS Rules 

.rounded-b-xs {
  border-bottom-right-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}

Usage 

<element class="rounded-b-xs" />

Responsive

Prefix .rounded-b-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-xs::before" />

<element class="content-after rounded-b-xs::after" />
 .rounded-b-xs Applies extra-small radius to bottom-left and bottom-right corners via --radius-xs.

rounded-b-sm

Applies small radius to bottom-left and bottom-right corners via --radius-sm.

CSS Rules 

.rounded-b-sm {
  border-bottom-right-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

Usage 

<element class="rounded-b-sm" />

Responsive

Prefix .rounded-b-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-sm::before" />

<element class="content-after rounded-b-sm::after" />
 .rounded-b-sm Applies small radius to bottom-left and bottom-right corners via --radius-sm.

rounded-b-md

Applies medium radius to bottom-left and bottom-right corners via --radius-md.

CSS Rules 

.rounded-b-md {
  border-bottom-right-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

Usage 

<element class="rounded-b-md" />

Responsive

Prefix .rounded-b-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-md::before" />

<element class="content-after rounded-b-md::after" />
 .rounded-b-md Applies medium radius to bottom-left and bottom-right corners via --radius-md.

rounded-b-lg

Applies large radius to bottom-left and bottom-right corners via --radius-lg.

CSS Rules 

.rounded-b-lg {
  border-bottom-right-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

Usage 

<element class="rounded-b-lg" />

Responsive

Prefix .rounded-b-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-lg::before" />

<element class="content-after rounded-b-lg::after" />
 .rounded-b-lg Applies large radius to bottom-left and bottom-right corners via --radius-lg.

rounded-b-xl

Applies extra-large radius to bottom-left and bottom-right corners via --radius-xl.

CSS Rules 

.rounded-b-xl {
  border-bottom-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

Usage 

<element class="rounded-b-xl" />

Responsive

Prefix .rounded-b-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-xl::before" />

<element class="content-after rounded-b-xl::after" />
 .rounded-b-xl Applies extra-large radius to bottom-left and bottom-right corners via --radius-xl.

rounded-b-2xl

Applies very large radius to bottom-left and bottom-right corners via --radius-2xl.

CSS Rules 

.rounded-b-2xl {
  border-bottom-right-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-b-2xl" />

Responsive

Prefix .rounded-b-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-2xl::before" />

<element class="content-after rounded-b-2xl::after" />
 .rounded-b-2xl Applies very large radius to bottom-left and bottom-right corners via --radius-2xl.

rounded-b-3xl

Applies larger radius to bottom-left and bottom-right corners via --radius-3xl.

CSS Rules 

.rounded-b-3xl {
  border-bottom-right-radius: var(--radius-3xl);
  border-bottom-left-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-b-3xl" />

Responsive

Prefix .rounded-b-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-3xl::before" />

<element class="content-after rounded-b-3xl::after" />
 .rounded-b-3xl Applies larger radius to bottom-left and bottom-right corners via --radius-3xl.

rounded-b-4xl

Applies largest radius to bottom-left and bottom-right corners via --radius-4xl.

CSS Rules 

.rounded-b-4xl {
  border-bottom-right-radius: var(--radius-4xl);
  border-bottom-left-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-b-4xl" />

Responsive

Prefix .rounded-b-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-4xl::before" />

<element class="content-after rounded-b-4xl::after" />
 .rounded-b-4xl Applies largest radius to bottom-left and bottom-right corners via --radius-4xl.

rounded-b-none

Removes radius from bottom-left and bottom-right corners.

CSS Rules 

.rounded-b-none {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

Usage 

<element class="rounded-b-none" />

Responsive

Prefix .rounded-b-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-none::before" />

<element class="content-after rounded-b-none::after" />
 .rounded-b-none Removes radius from bottom-left and bottom-right corners.

rounded-b-full

Makes bottom-left and bottom-right corners fully rounded using an infinite radius.

CSS Rules 

.rounded-b-full {
  border-bottom-right-radius: calc(infinity * 1px);
  border-bottom-left-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-b-full" />

Responsive

Prefix .rounded-b-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-b-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-b-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-b-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-b-full::before" />

<element class="content-after rounded-b-full::after" />
 .rounded-b-full Makes bottom-left and bottom-right corners fully rounded using an infinite radius.

rounded-l-xs

Applies extra-small radius to top-left and bottom-left corners via --radius-xs.

CSS Rules 

.rounded-l-xs {
  border-top-left-radius: var(--radius-xs);
  border-bottom-left-radius: var(--radius-xs);
}

Usage 

<element class="rounded-l-xs" />

Responsive

Prefix .rounded-l-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-xs::before" />

<element class="content-after rounded-l-xs::after" />
 .rounded-l-xs Applies extra-small radius to top-left and bottom-left corners via --radius-xs.

rounded-l-sm

Applies small radius to top-left and bottom-left corners via --radius-sm.

CSS Rules 

.rounded-l-sm {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

Usage 

<element class="rounded-l-sm" />

Responsive

Prefix .rounded-l-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-sm::before" />

<element class="content-after rounded-l-sm::after" />
 .rounded-l-sm Applies small radius to top-left and bottom-left corners via --radius-sm.

rounded-l-md

Applies medium radius to top-left and bottom-left corners via --radius-md.

CSS Rules 

.rounded-l-md {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}

Usage 

<element class="rounded-l-md" />

Responsive

Prefix .rounded-l-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-md::before" />

<element class="content-after rounded-l-md::after" />
 .rounded-l-md Applies medium radius to top-left and bottom-left corners via --radius-md.

rounded-l-lg

Applies large radius to top-left and bottom-left corners via --radius-lg.

CSS Rules 

.rounded-l-lg {
  border-top-left-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-lg);
}

Usage 

<element class="rounded-l-lg" />

Responsive

Prefix .rounded-l-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-lg::before" />

<element class="content-after rounded-l-lg::after" />
 .rounded-l-lg Applies large radius to top-left and bottom-left corners via --radius-lg.

rounded-l-xl

Applies extra-large radius to top-left and bottom-left corners via --radius-xl.

CSS Rules 

.rounded-l-xl {
  border-top-left-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
}

Usage 

<element class="rounded-l-xl" />

Responsive

Prefix .rounded-l-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-xl::before" />

<element class="content-after rounded-l-xl::after" />
 .rounded-l-xl Applies extra-large radius to top-left and bottom-left corners via --radius-xl.

rounded-l-2xl

Applies very large radius to top-left and bottom-left corners via --radius-2xl.

CSS Rules 

.rounded-l-2xl {
  border-top-left-radius: var(--radius-2xl);
  border-bottom-left-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-l-2xl" />

Responsive

Prefix .rounded-l-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-2xl::before" />

<element class="content-after rounded-l-2xl::after" />
 .rounded-l-2xl Applies very large radius to top-left and bottom-left corners via --radius-2xl.

rounded-l-3xl

Applies larger radius to top-left and bottom-left corners via --radius-3xl.

CSS Rules 

.rounded-l-3xl {
  border-top-left-radius: var(--radius-3xl);
  border-bottom-left-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-l-3xl" />

Responsive

Prefix .rounded-l-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-3xl::before" />

<element class="content-after rounded-l-3xl::after" />
 .rounded-l-3xl Applies larger radius to top-left and bottom-left corners via --radius-3xl.

rounded-l-4xl

Applies largest radius to top-left and bottom-left corners via --radius-4xl.

CSS Rules 

.rounded-l-4xl {
  border-top-left-radius: var(--radius-4xl);
  border-bottom-left-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-l-4xl" />

Responsive

Prefix .rounded-l-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-4xl::before" />

<element class="content-after rounded-l-4xl::after" />
 .rounded-l-4xl Applies largest radius to top-left and bottom-left corners via --radius-4xl.

rounded-l-none

Removes radius from top-left and bottom-left corners.

CSS Rules 

.rounded-l-none {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Usage 

<element class="rounded-l-none" />

Responsive

Prefix .rounded-l-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-none::before" />

<element class="content-after rounded-l-none::after" />
 .rounded-l-none Removes radius from top-left and bottom-left corners.

rounded-l-full

Makes top-left and bottom-left corners fully rounded using an infinite radius.

CSS Rules 

.rounded-l-full {
  border-top-left-radius: calc(infinity * 1px);
  border-bottom-left-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-l-full" />

Responsive

Prefix .rounded-l-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-l-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-l-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-l-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-l-full::before" />

<element class="content-after rounded-l-full::after" />
 .rounded-l-full Makes top-left and bottom-left corners fully rounded using an infinite radius.

rounded-ss-xs

Applies extra-small radius to the start-start logical corner via --radius-xs.

CSS Rules 

.rounded-ss-xs {
  border-start-start-radius: var(--radius-xs);
}

Usage 

<element class="rounded-ss-xs" />

Responsive

Prefix .rounded-ss-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-xs::before" />

<element class="content-after rounded-ss-xs::after" />
 .rounded-ss-xs Applies extra-small radius to the start-start logical corner via --radius-xs.

rounded-ss-sm

Applies small radius to the start-start logical corner via --radius-sm.

CSS Rules 

.rounded-ss-sm {
  border-start-start-radius: var(--radius-sm);
}

Usage 

<element class="rounded-ss-sm" />

Responsive

Prefix .rounded-ss-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-sm::before" />

<element class="content-after rounded-ss-sm::after" />
 .rounded-ss-sm Applies small radius to the start-start logical corner via --radius-sm.

rounded-ss-md

Applies medium radius to the start-start logical corner via --radius-md.

CSS Rules 

.rounded-ss-md {
  border-start-start-radius: var(--radius-md);
}

Usage 

<element class="rounded-ss-md" />

Responsive

Prefix .rounded-ss-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-md::before" />

<element class="content-after rounded-ss-md::after" />
 .rounded-ss-md Applies medium radius to the start-start logical corner via --radius-md.

rounded-ss-lg

Applies large radius to the start-start logical corner via --radius-lg.

CSS Rules 

.rounded-ss-lg {
  border-start-start-radius: var(--radius-lg);
}

Usage 

<element class="rounded-ss-lg" />

Responsive

Prefix .rounded-ss-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-lg::before" />

<element class="content-after rounded-ss-lg::after" />
 .rounded-ss-lg Applies large radius to the start-start logical corner via --radius-lg.

rounded-ss-xl

Applies extra-large radius to the start-start logical corner via --radius-xl.

CSS Rules 

.rounded-ss-xl {
  border-start-start-radius: var(--radius-xl);
}

Usage 

<element class="rounded-ss-xl" />

Responsive

Prefix .rounded-ss-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-xl::before" />

<element class="content-after rounded-ss-xl::after" />
 .rounded-ss-xl Applies extra-large radius to the start-start logical corner via --radius-xl.

rounded-ss-2xl

Applies very large radius to the start-start logical corner via --radius-2xl.

CSS Rules 

.rounded-ss-2xl {
  border-start-start-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-ss-2xl" />

Responsive

Prefix .rounded-ss-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-2xl::before" />

<element class="content-after rounded-ss-2xl::after" />
 .rounded-ss-2xl Applies very large radius to the start-start logical corner via --radius-2xl.

rounded-ss-3xl

Applies larger radius to the start-start logical corner via --radius-3xl.

CSS Rules 

.rounded-ss-3xl {
  border-start-start-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-ss-3xl" />

Responsive

Prefix .rounded-ss-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-3xl::before" />

<element class="content-after rounded-ss-3xl::after" />
 .rounded-ss-3xl Applies larger radius to the start-start logical corner via --radius-3xl.

rounded-ss-4xl

Applies largest radius to the start-start logical corner via --radius-4xl.

CSS Rules 

.rounded-ss-4xl {
  border-start-start-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-ss-4xl" />

Responsive

Prefix .rounded-ss-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-4xl::before" />

<element class="content-after rounded-ss-4xl::after" />
 .rounded-ss-4xl Applies largest radius to the start-start logical corner via --radius-4xl.

rounded-ss-none

Removes radius from the start-start logical corner.

CSS Rules 

.rounded-ss-none {
  border-start-start-radius: 0;
}

Usage 

<element class="rounded-ss-none" />

Responsive

Prefix .rounded-ss-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-none::before" />

<element class="content-after rounded-ss-none::after" />
 .rounded-ss-none Removes radius from the start-start logical corner.

rounded-ss-full

Makes the start-start logical corner fully rounded using an infinite radius.

CSS Rules 

.rounded-ss-full {
  border-start-start-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-ss-full" />

Responsive

Prefix .rounded-ss-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ss-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ss-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ss-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ss-full::before" />

<element class="content-after rounded-ss-full::after" />
 .rounded-ss-full Makes the start-start logical corner fully rounded using an infinite radius.

rounded-se-xs

Applies extra-small radius to the start-end logical corner via --radius-xs.

CSS Rules 

.rounded-se-xs {
  border-start-end-radius: var(--radius-xs);
}

Usage 

<element class="rounded-se-xs" />

Responsive

Prefix .rounded-se-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-xs::before" />

<element class="content-after rounded-se-xs::after" />
 .rounded-se-xs Applies extra-small radius to the start-end logical corner via --radius-xs.

rounded-se-sm

Applies small radius to the start-end logical corner via --radius-sm.

CSS Rules 

.rounded-se-sm {
  border-start-end-radius: var(--radius-sm);
}

Usage 

<element class="rounded-se-sm" />

Responsive

Prefix .rounded-se-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-sm::before" />

<element class="content-after rounded-se-sm::after" />
 .rounded-se-sm Applies small radius to the start-end logical corner via --radius-sm.

rounded-se-md

Applies medium radius to the start-end logical corner via --radius-md.

CSS Rules 

.rounded-se-md {
  border-start-end-radius: var(--radius-md);
}

Usage 

<element class="rounded-se-md" />

Responsive

Prefix .rounded-se-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-md::before" />

<element class="content-after rounded-se-md::after" />
 .rounded-se-md Applies medium radius to the start-end logical corner via --radius-md.

rounded-se-lg

Applies large radius to the start-end logical corner via --radius-lg.

CSS Rules 

.rounded-se-lg {
  border-start-end-radius: var(--radius-lg);
}

Usage 

<element class="rounded-se-lg" />

Responsive

Prefix .rounded-se-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-lg::before" />

<element class="content-after rounded-se-lg::after" />
 .rounded-se-lg Applies large radius to the start-end logical corner via --radius-lg.

rounded-se-xl

Applies extra-large radius to the start-end logical corner via --radius-xl.

CSS Rules 

.rounded-se-xl {
  border-start-end-radius: var(--radius-xl);
}

Usage 

<element class="rounded-se-xl" />

Responsive

Prefix .rounded-se-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-xl::before" />

<element class="content-after rounded-se-xl::after" />
 .rounded-se-xl Applies extra-large radius to the start-end logical corner via --radius-xl.

rounded-se-2xl

Applies very large radius to the start-end logical corner via --radius-2xl.

CSS Rules 

.rounded-se-2xl {
  border-start-end-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-se-2xl" />

Responsive

Prefix .rounded-se-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-2xl::before" />

<element class="content-after rounded-se-2xl::after" />
 .rounded-se-2xl Applies very large radius to the start-end logical corner via --radius-2xl.

rounded-se-3xl

Applies larger radius to the start-end logical corner via --radius-3xl.

CSS Rules 

.rounded-se-3xl {
  border-start-end-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-se-3xl" />

Responsive

Prefix .rounded-se-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-3xl::before" />

<element class="content-after rounded-se-3xl::after" />
 .rounded-se-3xl Applies larger radius to the start-end logical corner via --radius-3xl.

rounded-se-4xl

Applies largest radius to the start-end logical corner via --radius-4xl.

CSS Rules 

.rounded-se-4xl {
  border-start-end-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-se-4xl" />

Responsive

Prefix .rounded-se-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-4xl::before" />

<element class="content-after rounded-se-4xl::after" />
 .rounded-se-4xl Applies largest radius to the start-end logical corner via --radius-4xl.

rounded-se-none

Removes radius from the start-end logical corner.

CSS Rules 

.rounded-se-none {
  border-start-end-radius: 0;
}

Usage 

<element class="rounded-se-none" />

Responsive

Prefix .rounded-se-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-none::before" />

<element class="content-after rounded-se-none::after" />
 .rounded-se-none Removes radius from the start-end logical corner.

rounded-se-full

Makes the start-end logical corner fully rounded using an infinite radius.

CSS Rules 

.rounded-se-full {
  border-start-end-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-se-full" />

Responsive

Prefix .rounded-se-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-se-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-se-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-se-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-se-full::before" />

<element class="content-after rounded-se-full::after" />
 .rounded-se-full Makes the start-end logical corner fully rounded using an infinite radius.

rounded-ee-xs

Applies extra-small radius to the end-end logical corner via --radius-xs.

CSS Rules 

.rounded-ee-xs {
  border-end-end-radius: var(--radius-xs);
}

Usage 

<element class="rounded-ee-xs" />

Responsive

Prefix .rounded-ee-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-xs::before" />

<element class="content-after rounded-ee-xs::after" />
 .rounded-ee-xs Applies extra-small radius to the end-end logical corner via --radius-xs.

rounded-ee-sm

Applies small radius to the end-end logical corner via --radius-sm.

CSS Rules 

.rounded-ee-sm {
  border-end-end-radius: var(--radius-sm);
}

Usage 

<element class="rounded-ee-sm" />

Responsive

Prefix .rounded-ee-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-sm::before" />

<element class="content-after rounded-ee-sm::after" />
 .rounded-ee-sm Applies small radius to the end-end logical corner via --radius-sm.

rounded-ee-md

Applies medium radius to the end-end logical corner via --radius-md.

CSS Rules 

.rounded-ee-md {
  border-end-end-radius: var(--radius-md);
}

Usage 

<element class="rounded-ee-md" />

Responsive

Prefix .rounded-ee-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-md::before" />

<element class="content-after rounded-ee-md::after" />
 .rounded-ee-md Applies medium radius to the end-end logical corner via --radius-md.

rounded-ee-lg

Applies large radius to the end-end logical corner via --radius-lg.

CSS Rules 

.rounded-ee-lg {
  border-end-end-radius: var(--radius-lg);
}

Usage 

<element class="rounded-ee-lg" />

Responsive

Prefix .rounded-ee-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-lg::before" />

<element class="content-after rounded-ee-lg::after" />
 .rounded-ee-lg Applies large radius to the end-end logical corner via --radius-lg.

rounded-ee-xl

Applies extra-large radius to the end-end logical corner via --radius-xl.

CSS Rules 

.rounded-ee-xl {
  border-end-end-radius: var(--radius-xl);
}

Usage 

<element class="rounded-ee-xl" />

Responsive

Prefix .rounded-ee-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-xl::before" />

<element class="content-after rounded-ee-xl::after" />
 .rounded-ee-xl Applies extra-large radius to the end-end logical corner via --radius-xl.

rounded-ee-2xl

Applies very large radius to the end-end logical corner via --radius-2xl.

CSS Rules 

.rounded-ee-2xl {
  border-end-end-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-ee-2xl" />

Responsive

Prefix .rounded-ee-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-2xl::before" />

<element class="content-after rounded-ee-2xl::after" />
 .rounded-ee-2xl Applies very large radius to the end-end logical corner via --radius-2xl.

rounded-ee-3xl

Applies larger radius to the end-end logical corner via --radius-3xl.

CSS Rules 

.rounded-ee-3xl {
  border-end-end-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-ee-3xl" />

Responsive

Prefix .rounded-ee-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-3xl::before" />

<element class="content-after rounded-ee-3xl::after" />
 .rounded-ee-3xl Applies larger radius to the end-end logical corner via --radius-3xl.

rounded-ee-4xl

Applies largest radius to the end-end logical corner via --radius-4xl.

CSS Rules 

.rounded-ee-4xl {
  border-end-end-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-ee-4xl" />

Responsive

Prefix .rounded-ee-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-4xl::before" />

<element class="content-after rounded-ee-4xl::after" />
 .rounded-ee-4xl Applies largest radius to the end-end logical corner via --radius-4xl.

rounded-ee-none

Removes radius from the end-end logical corner.

CSS Rules 

.rounded-ee-none {
  border-end-end-radius: 0;
}

Usage 

<element class="rounded-ee-none" />

Responsive

Prefix .rounded-ee-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-none::before" />

<element class="content-after rounded-ee-none::after" />
 .rounded-ee-none Removes radius from the end-end logical corner.

rounded-ee-full

Makes the end-end logical corner fully rounded using an infinite radius.

CSS Rules 

.rounded-ee-full {
  border-end-end-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-ee-full" />

Responsive

Prefix .rounded-ee-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-ee-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-ee-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-ee-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-ee-full::before" />

<element class="content-after rounded-ee-full::after" />
 .rounded-ee-full Makes the end-end logical corner fully rounded using an infinite radius.

rounded-es-xs

Applies extra-small radius to the end-start logical corner via --radius-xs.

CSS Rules 

.rounded-es-xs {
  border-end-start-radius: var(--radius-xs);
}

Usage 

<element class="rounded-es-xs" />

Responsive

Prefix .rounded-es-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-xs::before" />

<element class="content-after rounded-es-xs::after" />
 .rounded-es-xs Applies extra-small radius to the end-start logical corner via --radius-xs.

rounded-es-sm

Applies small radius to the end-start logical corner via --radius-sm.

CSS Rules 

.rounded-es-sm {
  border-end-start-radius: var(--radius-sm);
}

Usage 

<element class="rounded-es-sm" />

Responsive

Prefix .rounded-es-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-sm::before" />

<element class="content-after rounded-es-sm::after" />
 .rounded-es-sm Applies small radius to the end-start logical corner via --radius-sm.

rounded-es-md

Applies medium radius to the end-start logical corner via --radius-md.

CSS Rules 

.rounded-es-md {
  border-end-start-radius: var(--radius-md);
}

Usage 

<element class="rounded-es-md" />

Responsive

Prefix .rounded-es-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-md::before" />

<element class="content-after rounded-es-md::after" />
 .rounded-es-md Applies medium radius to the end-start logical corner via --radius-md.

rounded-es-lg

Applies large radius to the end-start logical corner via --radius-lg.

CSS Rules 

.rounded-es-lg {
  border-end-start-radius: var(--radius-lg);
}

Usage 

<element class="rounded-es-lg" />

Responsive

Prefix .rounded-es-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-lg::before" />

<element class="content-after rounded-es-lg::after" />
 .rounded-es-lg Applies large radius to the end-start logical corner via --radius-lg.

rounded-es-xl

Applies extra-large radius to the end-start logical corner via --radius-xl.

CSS Rules 

.rounded-es-xl {
  border-end-start-radius: var(--radius-xl);
}

Usage 

<element class="rounded-es-xl" />

Responsive

Prefix .rounded-es-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-xl::before" />

<element class="content-after rounded-es-xl::after" />
 .rounded-es-xl Applies extra-large radius to the end-start logical corner via --radius-xl.

rounded-es-2xl

Applies very large radius to the end-start logical corner via --radius-2xl.

CSS Rules 

.rounded-es-2xl {
  border-end-start-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-es-2xl" />

Responsive

Prefix .rounded-es-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-2xl::before" />

<element class="content-after rounded-es-2xl::after" />
 .rounded-es-2xl Applies very large radius to the end-start logical corner via --radius-2xl.

rounded-es-3xl

Applies larger radius to the end-start logical corner via --radius-3xl.

CSS Rules 

.rounded-es-3xl {
  border-end-start-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-es-3xl" />

Responsive

Prefix .rounded-es-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-3xl::before" />

<element class="content-after rounded-es-3xl::after" />
 .rounded-es-3xl Applies larger radius to the end-start logical corner via --radius-3xl.

rounded-es-4xl

Applies largest radius to the end-start logical corner via --radius-4xl.

CSS Rules 

.rounded-es-4xl {
  border-end-start-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-es-4xl" />

Responsive

Prefix .rounded-es-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-4xl::before" />

<element class="content-after rounded-es-4xl::after" />
 .rounded-es-4xl Applies largest radius to the end-start logical corner via --radius-4xl.

rounded-es-none

Removes radius from the end-start logical corner.

CSS Rules 

.rounded-es-none {
  border-end-start-radius: 0;
}

Usage 

<element class="rounded-es-none" />

Responsive

Prefix .rounded-es-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-none::before" />

<element class="content-after rounded-es-none::after" />
 .rounded-es-none Removes radius from the end-start logical corner.

rounded-es-full

Makes the end-start logical corner fully rounded using an infinite radius.

CSS Rules 

.rounded-es-full {
  border-end-start-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-es-full" />

Responsive

Prefix .rounded-es-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-es-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-es-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-es-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-es-full::before" />

<element class="content-after rounded-es-full::after" />
 .rounded-es-full Makes the end-start logical corner fully rounded using an infinite radius.

rounded-tl-xs

Applies extra-small radius to the top-left corner via --radius-xs.

CSS Rules 

.rounded-tl-xs {
  border-top-left-radius: var(--radius-xs);
}

Usage 

<element class="rounded-tl-xs" />

Responsive

Prefix .rounded-tl-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-xs::before" />

<element class="content-after rounded-tl-xs::after" />
 .rounded-tl-xs Applies extra-small radius to the top-left corner via --radius-xs.

rounded-tl-sm

Applies small radius to the top-left corner via --radius-sm.

CSS Rules 

.rounded-tl-sm {
  border-top-left-radius: var(--radius-sm);
}

Usage 

<element class="rounded-tl-sm" />

Responsive

Prefix .rounded-tl-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-sm::before" />

<element class="content-after rounded-tl-sm::after" />
 .rounded-tl-sm Applies small radius to the top-left corner via --radius-sm.

rounded-tl-md

Applies medium radius to the top-left corner via --radius-md.

CSS Rules 

.rounded-tl-md {
  border-top-left-radius: var(--radius-md);
}

Usage 

<element class="rounded-tl-md" />

Responsive

Prefix .rounded-tl-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-md::before" />

<element class="content-after rounded-tl-md::after" />
 .rounded-tl-md Applies medium radius to the top-left corner via --radius-md.

rounded-tl-lg

Applies large radius to the top-left corner via --radius-lg.

CSS Rules 

.rounded-tl-lg {
  border-top-left-radius: var(--radius-lg);
}

Usage 

<element class="rounded-tl-lg" />

Responsive

Prefix .rounded-tl-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-lg::before" />

<element class="content-after rounded-tl-lg::after" />
 .rounded-tl-lg Applies large radius to the top-left corner via --radius-lg.

rounded-tl-xl

Applies extra-large radius to the top-left corner via --radius-xl.

CSS Rules 

.rounded-tl-xl {
  border-top-left-radius: var(--radius-xl);
}

Usage 

<element class="rounded-tl-xl" />

Responsive

Prefix .rounded-tl-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-xl::before" />

<element class="content-after rounded-tl-xl::after" />
 .rounded-tl-xl Applies extra-large radius to the top-left corner via --radius-xl.

rounded-tl-2xl

Applies very large radius to the top-left corner via --radius-2xl.

CSS Rules 

.rounded-tl-2xl {
  border-top-left-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-tl-2xl" />

Responsive

Prefix .rounded-tl-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-2xl::before" />

<element class="content-after rounded-tl-2xl::after" />
 .rounded-tl-2xl Applies very large radius to the top-left corner via --radius-2xl.

rounded-tl-3xl

Applies larger radius to the top-left corner via --radius-3xl.

CSS Rules 

.rounded-tl-3xl {
  border-top-left-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-tl-3xl" />

Responsive

Prefix .rounded-tl-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-3xl::before" />

<element class="content-after rounded-tl-3xl::after" />
 .rounded-tl-3xl Applies larger radius to the top-left corner via --radius-3xl.

rounded-tl-4xl

Applies largest radius to the top-left corner via --radius-4xl.

CSS Rules 

.rounded-tl-4xl {
  border-top-left-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-tl-4xl" />

Responsive

Prefix .rounded-tl-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-4xl::before" />

<element class="content-after rounded-tl-4xl::after" />
 .rounded-tl-4xl Applies largest radius to the top-left corner via --radius-4xl.

rounded-tl-none

Removes radius from the top-left corner.

CSS Rules 

.rounded-tl-none {
  border-top-left-radius: 0;
}

Usage 

<element class="rounded-tl-none" />

Responsive

Prefix .rounded-tl-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-none::before" />

<element class="content-after rounded-tl-none::after" />
 .rounded-tl-none Removes radius from the top-left corner.

rounded-tl-full

Makes the top-left corner fully rounded using an infinite radius.

CSS Rules 

.rounded-tl-full {
  border-top-left-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-tl-full" />

Responsive

Prefix .rounded-tl-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tl-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tl-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tl-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tl-full::before" />

<element class="content-after rounded-tl-full::after" />
 .rounded-tl-full Makes the top-left corner fully rounded using an infinite radius.

rounded-tr-xs

Applies extra-small radius to the top-right corner via --radius-xs.

CSS Rules 

.rounded-tr-xs {
  border-top-right-radius: var(--radius-xs);
}

Usage 

<element class="rounded-tr-xs" />

Responsive

Prefix .rounded-tr-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-xs::before" />

<element class="content-after rounded-tr-xs::after" />
 .rounded-tr-xs Applies extra-small radius to the top-right corner via --radius-xs.

rounded-tr-sm

Applies small radius to the top-right corner via --radius-sm.

CSS Rules 

.rounded-tr-sm {
  border-top-right-radius: var(--radius-sm);
}

Usage 

<element class="rounded-tr-sm" />

Responsive

Prefix .rounded-tr-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-sm::before" />

<element class="content-after rounded-tr-sm::after" />
 .rounded-tr-sm Applies small radius to the top-right corner via --radius-sm.

rounded-tr-md

Applies medium radius to the top-right corner via --radius-md.

CSS Rules 

.rounded-tr-md {
  border-top-right-radius: var(--radius-md);
}

Usage 

<element class="rounded-tr-md" />

Responsive

Prefix .rounded-tr-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-md::before" />

<element class="content-after rounded-tr-md::after" />
 .rounded-tr-md Applies medium radius to the top-right corner via --radius-md.

rounded-tr-lg

Applies large radius to the top-right corner via --radius-lg.

CSS Rules 

.rounded-tr-lg {
  border-top-right-radius: var(--radius-lg);
}

Usage 

<element class="rounded-tr-lg" />

Responsive

Prefix .rounded-tr-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-lg::before" />

<element class="content-after rounded-tr-lg::after" />
 .rounded-tr-lg Applies large radius to the top-right corner via --radius-lg.

rounded-tr-xl

Applies extra-large radius to the top-right corner via --radius-xl.

CSS Rules 

.rounded-tr-xl {
  border-top-right-radius: var(--radius-xl);
}

Usage 

<element class="rounded-tr-xl" />

Responsive

Prefix .rounded-tr-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-xl::before" />

<element class="content-after rounded-tr-xl::after" />
 .rounded-tr-xl Applies extra-large radius to the top-right corner via --radius-xl.

rounded-tr-2xl

Applies very large radius to the top-right corner via --radius-2xl.

CSS Rules 

.rounded-tr-2xl {
  border-top-right-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-tr-2xl" />

Responsive

Prefix .rounded-tr-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-2xl::before" />

<element class="content-after rounded-tr-2xl::after" />
 .rounded-tr-2xl Applies very large radius to the top-right corner via --radius-2xl.

rounded-tr-3xl

Applies larger radius to the top-right corner via --radius-3xl.

CSS Rules 

.rounded-tr-3xl {
  border-top-right-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-tr-3xl" />

Responsive

Prefix .rounded-tr-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-3xl::before" />

<element class="content-after rounded-tr-3xl::after" />
 .rounded-tr-3xl Applies larger radius to the top-right corner via --radius-3xl.

rounded-tr-4xl

Applies largest radius to the top-right corner via --radius-4xl.

CSS Rules 

.rounded-tr-4xl {
  border-top-right-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-tr-4xl" />

Responsive

Prefix .rounded-tr-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-4xl::before" />

<element class="content-after rounded-tr-4xl::after" />
 .rounded-tr-4xl Applies largest radius to the top-right corner via --radius-4xl.

rounded-tr-none

Removes radius from the top-right corner.

CSS Rules 

.rounded-tr-none {
  border-top-right-radius: 0;
}

Usage 

<element class="rounded-tr-none" />

Responsive

Prefix .rounded-tr-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-none::before" />

<element class="content-after rounded-tr-none::after" />
 .rounded-tr-none Removes radius from the top-right corner.

rounded-tr-full

Makes the top-right corner fully rounded using an infinite radius.

CSS Rules 

.rounded-tr-full {
  border-top-right-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-tr-full" />

Responsive

Prefix .rounded-tr-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-tr-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-tr-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-tr-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-tr-full::before" />

<element class="content-after rounded-tr-full::after" />
 .rounded-tr-full Makes the top-right corner fully rounded using an infinite radius.

rounded-br-xs

Applies extra-small radius to the bottom-right corner via --radius-xs.

CSS Rules 

.rounded-br-xs {
  border-bottom-right-radius: var(--radius-xs);
}

Usage 

<element class="rounded-br-xs" />

Responsive

Prefix .rounded-br-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-xs::before" />

<element class="content-after rounded-br-xs::after" />
 .rounded-br-xs Applies extra-small radius to the bottom-right corner via --radius-xs.

rounded-br-sm

Applies small radius to the bottom-right corner via --radius-sm.

CSS Rules 

.rounded-br-sm {
  border-bottom-right-radius: var(--radius-sm);
}

Usage 

<element class="rounded-br-sm" />

Responsive

Prefix .rounded-br-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-sm::before" />

<element class="content-after rounded-br-sm::after" />
 .rounded-br-sm Applies small radius to the bottom-right corner via --radius-sm.

rounded-br-md

Applies medium radius to the bottom-right corner via --radius-md.

CSS Rules 

.rounded-br-md {
  border-bottom-right-radius: var(--radius-md);
}

Usage 

<element class="rounded-br-md" />

Responsive

Prefix .rounded-br-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-md::before" />

<element class="content-after rounded-br-md::after" />
 .rounded-br-md Applies medium radius to the bottom-right corner via --radius-md.

rounded-br-lg

Applies large radius to the bottom-right corner via --radius-lg.

CSS Rules 

.rounded-br-lg {
  border-bottom-right-radius: var(--radius-lg);
}

Usage 

<element class="rounded-br-lg" />

Responsive

Prefix .rounded-br-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-lg::before" />

<element class="content-after rounded-br-lg::after" />
 .rounded-br-lg Applies large radius to the bottom-right corner via --radius-lg.

rounded-br-xl

Applies extra-large radius to the bottom-right corner via --radius-xl.

CSS Rules 

.rounded-br-xl {
  border-bottom-right-radius: var(--radius-xl);
}

Usage 

<element class="rounded-br-xl" />

Responsive

Prefix .rounded-br-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-xl::before" />

<element class="content-after rounded-br-xl::after" />
 .rounded-br-xl Applies extra-large radius to the bottom-right corner via --radius-xl.

rounded-br-2xl

Applies very large radius to the bottom-right corner via --radius-2xl.

CSS Rules 

.rounded-br-2xl {
  border-bottom-right-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-br-2xl" />

Responsive

Prefix .rounded-br-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-2xl::before" />

<element class="content-after rounded-br-2xl::after" />
 .rounded-br-2xl Applies very large radius to the bottom-right corner via --radius-2xl.

rounded-br-3xl

Applies larger radius to the bottom-right corner via --radius-3xl.

CSS Rules 

.rounded-br-3xl {
  border-bottom-right-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-br-3xl" />

Responsive

Prefix .rounded-br-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-3xl::before" />

<element class="content-after rounded-br-3xl::after" />
 .rounded-br-3xl Applies larger radius to the bottom-right corner via --radius-3xl.

rounded-br-4xl

Applies largest radius to the bottom-right corner via --radius-4xl.

CSS Rules 

.rounded-br-4xl {
  border-bottom-right-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-br-4xl" />

Responsive

Prefix .rounded-br-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-4xl::before" />

<element class="content-after rounded-br-4xl::after" />
 .rounded-br-4xl Applies largest radius to the bottom-right corner via --radius-4xl.

rounded-br-none

Removes radius from the bottom-right corner.

CSS Rules 

.rounded-br-none {
  border-bottom-right-radius: 0;
}

Usage 

<element class="rounded-br-none" />

Responsive

Prefix .rounded-br-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-none::before" />

<element class="content-after rounded-br-none::after" />
 .rounded-br-none Removes radius from the bottom-right corner.

rounded-br-full

Makes the bottom-right corner fully rounded using an infinite radius.

CSS Rules 

.rounded-br-full {
  border-bottom-right-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-br-full" />

Responsive

Prefix .rounded-br-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-br-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-br-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-br-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-br-full::before" />

<element class="content-after rounded-br-full::after" />
 .rounded-br-full Makes the bottom-right corner fully rounded using an infinite radius.

rounded-bl-xs

Applies extra-small radius to the bottom-left corner via --radius-xs.

CSS Rules 

.rounded-bl-xs {
  border-bottom-left-radius: var(--radius-xs);
}

Usage 

<element class="rounded-bl-xs" />

Responsive

Prefix .rounded-bl-xs utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-xs" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-xs:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-xs:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-xs::before" />

<element class="content-after rounded-bl-xs::after" />
 .rounded-bl-xs Applies extra-small radius to the bottom-left corner via --radius-xs.

rounded-bl-sm

Applies small radius to the bottom-left corner via --radius-sm.

CSS Rules 

.rounded-bl-sm {
  border-bottom-left-radius: var(--radius-sm);
}

Usage 

<element class="rounded-bl-sm" />

Responsive

Prefix .rounded-bl-sm utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-sm" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-sm:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-sm:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-sm::before" />

<element class="content-after rounded-bl-sm::after" />
 .rounded-bl-sm Applies small radius to the bottom-left corner via --radius-sm.

rounded-bl-md

Applies medium radius to the bottom-left corner via --radius-md.

CSS Rules 

.rounded-bl-md {
  border-bottom-left-radius: var(--radius-md);
}

Usage 

<element class="rounded-bl-md" />

Responsive

Prefix .rounded-bl-md utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-md" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-md:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-md:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-md::before" />

<element class="content-after rounded-bl-md::after" />
 .rounded-bl-md Applies medium radius to the bottom-left corner via --radius-md.

rounded-bl-lg

Applies large radius to the bottom-left corner via --radius-lg.

CSS Rules 

.rounded-bl-lg {
  border-bottom-left-radius: var(--radius-lg);
}

Usage 

<element class="rounded-bl-lg" />

Responsive

Prefix .rounded-bl-lg utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-lg" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-lg:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-lg:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-lg::before" />

<element class="content-after rounded-bl-lg::after" />
 .rounded-bl-lg Applies large radius to the bottom-left corner via --radius-lg.

rounded-bl-xl

Sets the bottom-left border radius to extra large.

CSS Rules 

.rounded-bl-xl {
  border-bottom-left-radius: var(--radius-xl);
}

Usage 

<element class="rounded-bl-xl" />

Responsive

Prefix .rounded-bl-xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-xl::before" />

<element class="content-after rounded-bl-xl::after" />
 .rounded-bl-xl Sets the bottom-left border radius to extra large.

rounded-bl-2xl

Sets the bottom-left border radius to 2xl.

CSS Rules 

.rounded-bl-2xl {
  border-bottom-left-radius: var(--radius-2xl);
}

Usage 

<element class="rounded-bl-2xl" />

Responsive

Prefix .rounded-bl-2xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-2xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-2xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-2xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-2xl::before" />

<element class="content-after rounded-bl-2xl::after" />
 .rounded-bl-2xl Sets the bottom-left border radius to 2xl.

rounded-bl-3xl

Sets the bottom-left border radius to 3xl.

CSS Rules 

.rounded-bl-3xl {
  border-bottom-left-radius: var(--radius-3xl);
}

Usage 

<element class="rounded-bl-3xl" />

Responsive

Prefix .rounded-bl-3xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-3xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-3xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-3xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-3xl::before" />

<element class="content-after rounded-bl-3xl::after" />
 .rounded-bl-3xl Sets the bottom-left border radius to 3xl.

rounded-bl-4xl

Sets the bottom-left border radius to 4xl.

CSS Rules 

.rounded-bl-4xl {
  border-bottom-left-radius: var(--radius-4xl);
}

Usage 

<element class="rounded-bl-4xl" />

Responsive

Prefix .rounded-bl-4xl utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-4xl" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-4xl:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-4xl:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-4xl::before" />

<element class="content-after rounded-bl-4xl::after" />
 .rounded-bl-4xl Sets the bottom-left border radius to 4xl.

rounded-bl-none

Removes the bottom-left border radius.

CSS Rules 

.rounded-bl-none {
  border-bottom-left-radius: 0;
}

Usage 

<element class="rounded-bl-none" />

Responsive

Prefix .rounded-bl-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-none::before" />

<element class="content-after rounded-bl-none::after" />
 .rounded-bl-none Removes the bottom-left border radius.

rounded-bl-full

Sets the bottom-left border radius to fully rounded (pill/circle).

CSS Rules 

.rounded-bl-full {
  border-bottom-left-radius: calc(infinity * 1px);
}

Usage 

<element class="rounded-bl-full" />

Responsive

Prefix .rounded-bl-full utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). 

<element class="md:rounded-bl-full" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover. 

<element class="rounded-bl-full:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered. 

<element class="group">
  <element class="rounded-bl-full:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work. 

<element class="content-before rounded-bl-full::before" />

<element class="content-after rounded-bl-full::after" />
 .rounded-bl-full Sets the bottom-left border radius to fully rounded (pill/circle).