Borders

Boder

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-subtractive
  border-color="primary"
 />
 <b-div
  border-subtractive="top"
  border-color="primary"
 />
 <b-div
  border-subtractive="end"
  border-color="primary"
 />
 <b-div
  border-subtractive="bottom"
  border-color="primary"
 />
 <b-div
  border-subtractive="start"
  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>

Color

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

vue

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

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

Width

vue

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

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

Radius

Add classes to an element to easily round its corners.

vue

<template>
 <b-div
  border
  rounded
 />
 <b-div
  border
  rounded="top"
 />
 <b-div
  border
  rounded="end"
 />
 <b-div
  border
  rounded="bottom"
 />
 <b-div
  border
  rounded="start"
 />
 <b-div
  border
  rounded="circle"
 />
 <b-div
  border
  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

To make rounded corners larger or smaller, use the scaling class. Sizes range from 0 to 5 and can be set by changing the utility API.

vue

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

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

Extend

Extend color

blue

blue
100

blue
200

blue
300

blue
400

blue
500

blue
600

blue
700

blue
800

blue
900

indigo

indigo
100

indigo
200

indigo
300

indigo
400

indigo
500

indigo
600

indigo
700

indigo
800

indigo
900

purple

purple
100

purple
200

purple
300

purple
400

purple
500

purple
600

purple
700

purple
800

purple
900

pink

pink
100

pink
200

pink
300

pink
400

pink
500

pink
600

pink
700

pink
800

pink
900

red

red
100

red
200

red
300

red
400

red
500

red
600

red
700

red
800

red
900

orange

orange
100

orange
200

orange
300

orange
400

orange
500

orange
600

orange
700

orange
800

orange
900

yellow

yellow
100

yellow
200

yellow
300

yellow
400

yellow
500

yellow
600

yellow
700

yellow
800

yellow
900

green

green
100

green
200

green
300

green
400

green
500

green
600

green
700

green
800

green
900

teal

teal
100

teal
200

teal
300

teal
400

teal
500

teal
600

teal
700

teal
800

teal
900

cyan

cyan
100

cyan
200

cyan
300

cyan
400

cyan
500

cyan
600

cyan
700

cyan
800

cyan
900

Bootstrap