Docs

You are viewing documentation for an older Vaadin version. View latest documentation

Docs

Shape

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

Note
Only available in Lumo
This documentation applies only to the Lumo theme.
Open in a
new tab
// Import all Lumo CSS custom properties into the global style scope
// tag::color[]
import '@vaadin/vaadin-lumo-styles/color';
// end::color[]
// tag::typography[]
import '@vaadin/vaadin-lumo-styles/typography';
// end::typography[]
// tag::size[]
import '@vaadin/vaadin-lumo-styles/sizing';
// end::size[]
// tag::space[]
import '@vaadin/vaadin-lumo-styles/spacing';
// end::space[]
// tag::style[]
import '@vaadin/vaadin-lumo-styles/style';
// end::style[]
// prettier-ignore

Border Radius

The border radius 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 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.

A5D69CF6-80B1-4725-872F-9BD70F9F8C6D