> Markdown version of [Border](https://vaadin.com/docs/v14/flow/styling/lumo/border). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Lumo Border

Custom properties which affect the visual style of component borders.

## <a id="border-radius"></a>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.

## <a id="examples"></a>Examples

```html
<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`