# Borders

Border width, styles and radii for bounding elements.

Section: foundations
Docs: https://nebula.kaluza.com/foundations/borders

---

## Border Width
Borders should use the standard width and this should be the default option when in doubt. Interactive elements, such as form inputs, may use the `heavy` option to visually set it apart, e.g. input errors.
Heavier is reserved for active context indicators, such as disclosure and tabs.

<Stack spaceBetween={4}>
    <Card inline>
        <Inline spaceBetween={4}>
            <Block borderWidth="standard" borderRadius="standard" backgroundColor="none" borderColor="primary" height={12} width={12}/>
            <Block borderWidth="heavy" borderRadius="standard" borderColor="primary" backgroundColor="none" height={12} width={12}/>
            <Block borderWidth="heavier" borderRadius="standard" borderColor="primary" backgroundColor="none" height={12} width={12}/>
        </Inline>
    </Card>
    _Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_
</Stack>

## Radii
Radii should be used on all corners of bounding elements. **Brands can set this to 0 to remove all border radius**.

<Stack spaceBetween={4}>
    <Card inline>
        <Inline>
            <Block borderRadius="standard" style={{ }} height={12} width={12}/>
            <Block borderRadius="large" style={{ }} height={12} width={12}/>
        </Inline>
    </Card>
    _Theme tokens for this component are configurable via `createTheme`. See the theme guide: https://nebula.kaluza.com/guides/theme_
</Stack>