> Markdown version of [App Layout](https://vaadin.com/docs/next/styling/themes/aura/app-layout). Section index: [llms.txt](https://vaadin.com/docs/next/styling/llms.txt)

# Aura App Layout

Aura offers customization options how the App Layout component renders the main content area.

> **Note: Always use a unit when setting these property values to zero**
>
> These properties are used in CSS `calc()` functions and require a unit when setting the value to zero, e.g., `0px`.

## <a id="inset"></a>Inset

- `--aura-app-layout-inset`

  A length value that defines how much the navigation and content areas are inset within the browser viewport. The default is `1.5vmin`. You can set it to zero if you want to maximize the space that is available for the UI.

  The inset is set to zero automatically once the browser viewport is below 800px width or 600px height. That rule uses `!important`, so a plain declaration doesn’t override it at those viewport sizes.

Example 1. Customizing the App Layout inset

```css
html {
  --aura-app-layout-inset: 0px;
}
```

[Image: app layout inset]

By default, the navigation and content is slightly inset from the edge of the browser viewport. When the inset is zero, the navigation and content areas take all the space within the browser viewport.

## <a id="border"></a>Border

- `--aura-app-layout-radius`

  Sets the border radius of the content area within the App Layout component. Effective only if `--aura-app-layout-inset` is not zero. Default is the [base style L size border radius](https://vaadin.com/docs/next/styling/themes/base.md#radius).

- `--aura-app-layout-border-width`

  The border width around the App Layout content area. The default is `1px`. The border isn’t rendered at the viewport sizes where the inset is forced to zero.

Example 2. Customizing the App Layout border radius

```css
html {
  --aura-app-layout-radius: 5px;
}
```

[Image: app layout radius]