# Styles

Source: https://iriscss.com/documentation/modifiers/styles/

`.rounded`, `.square`, `.outlined`, `.tint` and `.deep` change the shape and finish of an element. `.light` and `.dark` set its theme.

## Rounded

`.rounded` gives pill corners to buttons, inputs, selects, textareas, groups, progress bars and meters. Cards, boxes and code get larger corners instead of a pill.

```html
<div class="cluster">
  <button class="primary rounded">Rounded</button>
  <input type="text" class="rounded" placeholder="Rounded input" aria-label="Rounded input">
</div>
<progress class="rounded" value="40" max="100"></progress>
<div class="box rounded">Rounded box</div>
```

## Square

`.square` removes the corners on the same elements.

```html
<div class="cluster">
  <button class="primary square">Square</button>
  <input type="text" class="square" placeholder="Square input" aria-label="Square input">
</div>
<div class="box square">Square box</div>
```

## Outlined

`.outlined` swaps a fill or a shadow for a border. It works on buttons, badges, cards and boxes. On inputs, selects, textareas and select buttons it makes the background transparent.

```html
<div class="cluster">
  <button class="danger outlined">Outlined</button>
  <span class="badge danger outlined">Badge</span>
  <input type="text" class="outlined" placeholder="Outlined input" aria-label="Outlined input">
</div>
<article class="card outlined"><p>Outlined card</p></article>
```

## Tint and deep

On buttons, `.tint` is a pale tint and `.deep` a deep shade, the same in both themes.

```html
<button class="info tint">Tint</button>
<button class="info deep">Deep</button>
```

## Light and dark

`.light` and `.dark` force the light or dark theme on an element and everything inside it, like `data-theme`, see [themes](https://iriscss.com/documentation/customize/themes/index.html.md#nested). On code, `.light` also switches to light code colors.

```html
<article class="card light"><p>Light card</p></article>
<article class="card dark"><p>Dark card</p></article>
```

## Variables

The corners come from the radius scale in [borders](https://iriscss.com/documentation/customize/css-variables/index.html.md#borders): `--i-border-radius-pill` for `.rounded` and `--i-border-radius-xlarge` on cards, boxes and code.