> Markdown version of [Shape](https://vaadin.com/docs/v23/styling/lumo/design-tokens/shape). Section index: [llms.txt](https://vaadin.com/docs/v23/styling/llms.txt)

# Lumo Shapes

This page lists Lumo shapes-related [CSS Custom Properties](https://vaadin.com/docs/v23/styling/custom-theme/css-custom-properties.md), which you can use to adjust the visual style of component shapes.

Lumo defines several border radius values. These values are defined as `em` by default, so they scale with the font size.

| Description                                                                                                 | CSS Custom Property    |
| ----------------------------------------------------------------------------------------------------------- | ---------------------- |
| **Large** Dialogs, cards, and other larger container elements.                                              | --lumo-border-radius-l |
| **Medium** Buttons and input fields, and most other normal-sized UI elements.                               | --lumo-border-radius-m |
| **Small** Checkboxes and other small elements that could turn into circles with an excessive border radius. | --lumo-border-radius-s |

> **Caution: The --lumo-border-radius property is deprecated**
>
> Use the `--lumo-border-radius-m` property as a replacement.

> **Important: Always use a unit for the value**
>
> If you set one of the border radius property values to zero, always use an explicit unit, for example, `--lumo-border-radius-m: 0px;`. If you use `0` without a unit, it causes some CSS `calc()` operations to be invalid.

`4ECB9253-C3E4-480C-B7B9-0F92D2D61465`