oa/documentation/icon-box/icon-box-rounded-border-documentation.md

### Rounded border

The Vuero `<VIconBox />` component can have a thick border.
You can add a border by simply adding the `bordered` and `rounded`
props to the component. See the code example for more details.

<!--code-->

```vue
<template>
  <VIconBox
    size="medium"
    color="primary"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="info"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="success"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="warning"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="danger"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="purple"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="yellow"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="orange"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="green"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="red"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
  <VIconBox
    size="medium"
    color="blue"
    bordered
    rounded
  >
    <i class="lnil lnil-vector-pen" />
  </VIconBox>
</template>
```

<!--/code-->

<!--example-->

<div class="is-flex is-gap-0.5 is-flex-wrap-wrap is-align-items-flex-end">
    <VIconBox size="medium" color="primary" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="info" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="success" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="warning" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="danger" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="purple" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="yellow" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="orange" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="green" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="red" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
    <VIconBox size="medium" color="blue" bordered rounded>
        <i class="lnil lnil-vector-pen"></i>
    </VIconBox>
</div>

<!--/example-->