import {
  cell,
  borderRadius,
  borderRadiusMedium,
  borderRadiusLarge,
  borderRadiusCircle
} from './borderRadius.styl'
import { Div, Span } from '@startupjs/ui'

# Border Radius

The keep of the design language consistent, a uniform border radius should be applied equally to all content.

## Medium border radius - 4px

Used for small-medium content (input-fields, buttons, toasts, cards).

<Div style={[borderRadius, borderRadiusMedium]}>
  <Span>4 px</Span>
</Div>

```styl
  .element
    radius(m)
```

## Large border radius - 8px

Used for large content (large cards, tables, modal dialogs).

<Div style={[borderRadius, borderRadiusLarge]}>
  <Span>8 px</Span>
</Div>

```styl
  .element
    radius(l)
```

## Circle border radius

Used for avatars, badges, notifications.

<Div style={[borderRadius, borderRadiusCircle]}>
  <Span>Circle</Span>
</Div>

```styl
  .element
    radius(circle)
```