Use these CSS custom properties to adjust the visual style of component shapes.

Only available in Lumo
This documentation applies only to the Lumo theme.


In server-side views (Flow/Java), the custom properties are imported automatically.

In client-side views (Fusion/TypeScript), you need to explicitly import the custom properties before you can use them in your style sheets.

import '@vaadin/vaadin-lumo-styles/style';

Learn how to use CSS Custom Properties.

Border Radius

The border radius values are defined as em by default, so they scale with the font size.

DescriptionCSS Custom Property

Dialogs, cards, and other larger container elements.


Buttons and input fields, and most other normal sized UI elements.


Checkboxes and other small elements that could turn into circles with a too large border radius.


The --lumo-border-radius property is deprecated
Use the --lumo-border-radius-m property as a replacement.
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 will cause some CSS calc() operations to be invalid.