# Corner Shape

Set the shape for element corners.

**Limited availability.** This feature does not work in some of the most widely-used browsers.

Chrome 139 · Edge 139 · Firefox unsupported · Safari unsupported

### Corner Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cs:b` | corner-shape | `bevel` |
| `cs:n` | corner-shape | `notch` |
| `cs:r` | corner-shape | `round` |
| `cs:s` | corner-shape | `squircle` |

### Corner Block End Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cbes:b` | corner-block-end-shape | `bevel` |
| `cbes:n` | corner-block-end-shape | `notch` |
| `cbes:r` | corner-block-end-shape | `round` |
| `cbes:s` | corner-block-end-shape | `squircle` |

### Corner Block Start Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cbss:b` | corner-block-start-shape | `bevel` |
| `cbss:n` | corner-block-start-shape | `notch` |
| `cbss:r` | corner-block-start-shape | `round` |
| `cbss:s` | corner-block-start-shape | `squircle` |

### Corner Bottom Left Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cbls:b` | corner-bottom-left-shape | `bevel` |
| `cbls:n` | corner-bottom-left-shape | `notch` |
| `cbls:r` | corner-bottom-left-shape | `round` |
| `cbls:s` | corner-bottom-left-shape | `squircle` |

### Corner Bottom Right Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cbrs:b` | corner-bottom-right-shape | `bevel` |
| `cbrs:n` | corner-bottom-right-shape | `notch` |
| `cbrs:r` | corner-bottom-right-shape | `round` |
| `cbrs:s` | corner-bottom-right-shape | `squircle` |

### Corner Bottom Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cbs:b` | corner-bottom-shape | `bevel` |
| `cbs:n` | corner-bottom-shape | `notch` |
| `cbs:r` | corner-bottom-shape | `round` |
| `cbs:s` | corner-bottom-shape | `squircle` |

### Corner End End Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cees:b` | corner-end-end-shape | `bevel` |
| `cees:n` | corner-end-end-shape | `notch` |
| `cees:r` | corner-end-end-shape | `round` |
| `cees:s` | corner-end-end-shape | `squircle` |

### Corner End Start Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cests:b` | corner-end-start-shape | `bevel` |
| `cests:n` | corner-end-start-shape | `notch` |
| `cests:r` | corner-end-start-shape | `round` |
| `cests:s` | corner-end-start-shape | `squircle` |

### Corner Inline End Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cies:b` | corner-inline-end-shape | `bevel` |
| `cies:n` | corner-inline-end-shape | `notch` |
| `cies:r` | corner-inline-end-shape | `round` |
| `cies:s` | corner-inline-end-shape | `squircle` |

### Corner Inline Start Shape

| Class | Properties | Value |
|-------|------------|-------|
| `ciss:b` | corner-inline-start-shape | `bevel` |
| `ciss:n` | corner-inline-start-shape | `notch` |
| `ciss:r` | corner-inline-start-shape | `round` |
| `ciss:s` | corner-inline-start-shape | `squircle` |

### Corner Left Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cls:b` | corner-left-shape | `bevel` |
| `cls:n` | corner-left-shape | `notch` |
| `cls:r` | corner-left-shape | `round` |
| `cls:s` | corner-left-shape | `squircle` |

### Corner Right Shape

| Class | Properties | Value |
|-------|------------|-------|
| `crs:b` | corner-right-shape | `bevel` |
| `crs:n` | corner-right-shape | `notch` |
| `crs:r` | corner-right-shape | `round` |
| `crs:s` | corner-right-shape | `squircle` |

### Corner Start End Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cses:b` | corner-start-end-shape | `bevel` |
| `cses:n` | corner-start-end-shape | `notch` |
| `cses:r` | corner-start-end-shape | `round` |
| `cses:s` | corner-start-end-shape | `squircle` |

### Corner Start Start Shape

| Class | Properties | Value |
|-------|------------|-------|
| `csss:b` | corner-start-start-shape | `bevel` |
| `csss:n` | corner-start-start-shape | `notch` |
| `csss:r` | corner-start-start-shape | `round` |
| `csss:s` | corner-start-start-shape | `squircle` |

### Corner Top Left Shape

| Class | Properties | Value |
|-------|------------|-------|
| `ctls:b` | corner-top-left-shape | `bevel` |
| `ctls:n` | corner-top-left-shape | `notch` |
| `ctls:r` | corner-top-left-shape | `round` |
| `ctls:s` | corner-top-left-shape | `squircle` |

### Corner Top Right Shape

| Class | Properties | Value |
|-------|------------|-------|
| `ctrs:b` | corner-top-right-shape | `bevel` |
| `ctrs:n` | corner-top-right-shape | `notch` |
| `ctrs:r` | corner-top-right-shape | `round` |
| `ctrs:s` | corner-top-right-shape | `squircle` |

### Corner Top Shape

| Class | Properties | Value |
|-------|------------|-------|
| `cts:b` | corner-top-shape | `bevel` |
| `cts:n` | corner-top-shape | `notch` |
| `cts:r` | corner-top-shape | `round` |
| `cts:s` | corner-top-shape | `squircle` |

## Variants

Prefix any class with a variant to apply it only under that condition. Variants stack, as in `@md:h:cs:r`.

### Breakpoints

Apply a class from a viewport width up. Each breakpoint covers its width & every width above it.

| Class | Applies |
|-------|---------|
| `@xs:cs:r` | From 32rem up. |
| `@sm:cs:r` | From 40rem up. |
| `@md:cs:r` | From 48rem up. |
| `@lg:cs:r` | From 64rem up. |
| `@xl:cs:r` | From 80rem up. |
| `@xxl:cs:r` | From 96rem up. |

### Containers

Apply a class from a container's width up, not the viewport's. Mark the parent with `ct:is` first.

| Class | Applies |
|-------|---------|
| `@c:xs:cs:r` | Container from 32rem up. |
| `@c:sm:cs:r` | Container from 40rem up. |
| `@c:md:cs:r` | Container from 48rem up. |
| `@c:lg:cs:r` | Container from 64rem up. |
| `@c:xl:cs:r` | Container from 80rem up. |
| `@c:xxl:cs:r` | Container from 96rem up. |

### Media

Apply a class when the device or the page matches a condition, or on the first frame an element renders.

| Class | Applies |
|-------|---------|
| `@pc:cs:r` | On a touch screen. |
| `@prm:cs:r` | With reduced motion on. |
| `@st:cs:r` | On the first frame. |

### States

Apply a class only while the element is in a state, such as hovered, focused or checked.

| Class | Applies |
|-------|---------|
| `h:cs:r` | On :hover. |
| `f:cs:r` | On :focus. |
| `fv:cs:r` | On :focus-visible. |
| `a:cs:r` | On :active. |
| `d:cs:r` | On :disabled. |
| `fc:cs:r` | On :first-child. |
| `c:cs:r` | On :checked. |
| `e:cs:r` | On :empty. |
| `fw:cs:r` | On :focus-within. |
| `i:cs:r` | On :invalid. |
| `in:cs:r` | On :indeterminate. |
| `lc:cs:r` | On :last-child. |
| `nc:cs:r` | On :nth-child. |
| `r:cs:r` | On :required. |
| `ro:cs:r` | On :read-only. |
| `v:cs:r` | On :valid. |

### Pseudo Elements

Style a part of the element rather than the element itself, such as its placeholder or the selected text.

| Class | Applies |
|-------|---------|
| `a::cs:r` | On ::after. |
| `b::cs:r` | On ::before. |
| `p::cs:r` | On ::placeholder. |
| `s::cs:r` | On ::selection. |