Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

On this page

ボーダー Boder

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

Border

Use border utilities to add or remove an element's borders. Choose from all borders or one at a time.

Additive

vue

<template>
  <b-div
    border
    border-color="primary"
  />
  <b-div
    border="top"
    border-color="primary"
  />
  <b-div
    border="end"
    border-color="primary"
  />
  <b-div
    border="bottom"
    border-color="primary"
  />
  <b-div
    border="start"
    border-color="primary"
  />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Subtractive

vue

<template>
  <b-div
    border="0"
    border-color="primary"
  />
  <b-div
    border="top-0"
    border-color="primary"
  />
  <b-div
    border="end-0"
    border-color="primary"
  />
  <b-div
    border="bottom-0"
    border-color="primary"
  />
  <b-div
    border="start-0"
    border-color="primary"
  />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
  border-style: solid;
}
</style>

Border color

Change the border color using utilities built on our theme colors.

vue

<template>
  <b-div border-color="primary" />
  <b-div border-color="secondary" />
  <b-div border-color="success" />
  <b-div border-color="danger" />
  <b-div border-color="warning" />
  <b-div border-color="info" />
  <b-div border-color="light" />
  <b-div border-color="dark" />
  <b-div border-color="white" />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Border-width

vue

<template>
  <b-div border-width="1" />
  <b-div border-width="2" />
  <b-div border-width="3" />
  <b-div border-width="4" />
  <b-div border-width="5" />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Border-radius

Add classes to an element to easily round its corners.

vue

<template>
  <b-div rounded />
  <b-div rounded="top" />
  <b-div rounded="end" />
  <b-div rounded="bottom" />
  <b-div rounded="start" />
  <b-div rounded="circle" />
  <b-div rounded="pill" />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}

.rounded-pill {
  width: 7rem;
}
</style>

Sizes

vue

<template>
  <b-div :rounded-size="0" />
  <b-div :rounded-size="1" />
  <b-div :rounded-size="2" />
  <b-div :rounded-size="3" />
</template>

<style lang="scss" scoped>
div {
  display: inline-block;
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  background-color: #f5f5f5;
}
</style>

Bootstrap