Box Modifiers

There's a couple of classes that help you add certain styles like borders to block elements, rounded edges and shadows in various directions.

Borders

border

• Additive

• border{-SID}

  • top end bottom start

• Subtractive

• border-0{-SID}

  • top end bottom start

Try it

The border class adds a very light border to your elements.

There are classes that add a border to a specific side. Notice that because of the Right To Left support, what you might be used to calling left is now start and what was formerly known as right is now called end.

There is also a set of classes that deletes the borders from a specific side. It assumes that these sides have already been assigned borders.

You can add more than one of these classes to add or delete specific borders to different sides.

Contextual Borders

• border-{COL}
  • COL:
    primary secondary success danger
warning info light dark white

Try it

Border Width

• border-{NUM}
  • NUM: 1 2 3 4 5

Try it

There are a few sizes for borders from 1 to 5 pixels. By the way, border-1 happens to be the same size as just border. You can also combine these with the contextual colors or sizes, but they will affect all of the borders in the current element.

Border Radius

• rounded{-TYP}

• SIDE

top end bottom start

• SHAPE

circle pill

Try it

Radius Sizes

• rounded-{NUM}
  • NUM: 0 1 2 3

Try it

If you want a little better control over the roundness of the edges you can use these sizes right here. rounded-0 is the same as not adding rounded, rounded-1 is slightly smaller roundness than just using the rounded class and rounded-3 is slightly bigger.

Shadows

• shadow{-SIZ}
  • SIZ: none sm lg

Try it

There are four shadow classes. You can just use the shadown keyword or add a modifier.

The none keyword is an override and we can use it to turn the shadow off an existing element.

There is a small shadown and a large shadow. The regular shadow is in between these.