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.

<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>