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

HTML

  1. <div class="box s radius">S</div>
  2. <div class="box m radius">M</div>
  3. <div class="box l radius">L</div>
  5. <custom-style>
  6.   <style>
  7.     .radius.s {
  8.       border-radius: var(--lumo-border-radius-s);
  9.     }
  10.     .radius.m {
  11.       border-radius: var(--lumo-border-radius-m);
  12.     }
  13.     .radius.l {
  14.       border-radius: var(--lumo-border-radius-l);
  15.     }
  16.   </style>
  17. </custom-style>