My Design System

Shape

Use these CSS Custom Properties to adjust the visual style of component shapes.

Importing

Import the custom properties before using them in your style sheets.

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

Border Radius

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

DescriptionCSS 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 a too large 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.