Docs

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

Docs

Lumo Border

Custom properties which affect the visual style of component borders.

Border Radius

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

Note
 If you want to set a border radius property to zero, you need to specify a unit for it as well (for example 0px), as it can be used in calc functions which will be undefined if the border radius is a unitless value.
--lumo-border-radius-s: 0.25em
Use for small elements. To ensure they never turn into full circles, keep this value below 0.5em.
--lumo-border-radius-m: 0.25em
The most commonly used roundness. It's recommended to keep the value between 0em and calc(var(--lumo-size-m) / 2)
--lumo-border-radius-l: 0.5em
Use for large containers, such as cards and dialogs. It's recommended to keep the value between 0em and 0.5em
--lumo-border-radius: 0.25em
Deprecated. Use --lumo-border-radius-m instead.

Examples

<div class="box s radius">S</div>
<div class="box m radius">M</div>
<div class="box l radius">L</div>

<custom-style>
  <style>
    .radius.s {
      border-radius: var(--lumo-border-radius-s);
    }
    .radius.m {
      border-radius: var(--lumo-border-radius-m);
    }
    .radius.l {
      border-radius: var(--lumo-border-radius-l);
    }
  </style>
</custom-style>

0842AB9C-187F-4A60-BFE1-5508560C8846