Documentation

Documentation

Lumo Shapes

Describing the Lumo style properties related to component shapes.

This page lists Lumo shapes-related style properties, 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, instead.
Important
 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