Utilities for borders, border radius, and box shadows.

Default border

The default border utility applies a solid, 1px border, with a default gray color.

<div class="border">

Borders can be applied to a specific edge or to the Y axis.

<div class="d-flex mb-3">
  <div class="border-left col-3">
  <div class="border-top col-3">
  <div class="border-bottom col-3">
  <div class="border-right col-3">
<div class="border-y">

Remove borders from all sides or a single side with .border-0, .border-top-0, .border-right-0, .border-bottom-0, .border-left-0.

<div class="Box border-top-0">

Border colors

Override default border colors with blue, green, red, purple, yellow, and gray border color utilities.

<div class="border border-blue mb-2">
<div class="border border-blue-light mb-2">
<div class="border border-green mb-2">
<div class="border border-green-light mb-2">
<div class="border border-red mb-2">
<div class="border border-red-light mb-2">
<div class="border border-purple mb-2">
<div class="border border-yellow mb-2">
<div class="border border-gray-light mb-2">
<div class="border border-gray-dark mb-2">

Borders with alpha transparency

Use border-black-fade to add an rgba black border with an alpha transparency of 0.15. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: rgba(27,31,35, 0.15).

<div class="border border-black-fade bg-blue-light p-2 mb-2">
  .border-black-fade .bg-blue-light
<div class="border border-black-fade bg-red-light p-2 mb-2">
  .border-black-fade .bg-red-light

Border style

Use border-dashed to give an element a dashed border.

<div class="border border-dashed p-2">

Rounded corners

Add or remove rounded corners: rounded-0 removes rounded corners, rounded-1 applies a border radius of 3px, rounded-2 applies a border radius of 6px.

<div class="Box rounded-0 mb-2">
<div class="border rounded-1 mb-2">
<div class="border rounded-2">