Background, Borders, and Colors

Use border utilities to quickly style the border and border-radius of an element and convey meaning through color and background-color with a handful of color utility classes.

Simple borders

The @outputclass="border-{size}" classes allow you to set a stronger border than before. The size is from 6 to 10, and 20. With the .rounded-6 outputclass you can set even larger roundings.

.border-6, .rounded-6

.border-7

.border-8

.border-9

.border-10

.border-20

<div outputclass="border border-6 border-fresh rounded-6 p-3 bg-cream text-dark">
  .border-6, .rounded-6
</div>
<div outputclass="border-start border-7 border-primary p-3 bg-cream text-dark">
  .border-7</div>
<div outputclass="border-end border-8 border-secondary p-3 bg-cream text-dark">
  .border-8
</div>
<div outputclass="border-top border-9 border-info p-3 bg-cream text-dark">
  .border-9
</div>
<div outputclass="border-bottom border-10 border-warning p-3 bg-cream text-dark">
  .border-10
</div>
<div outputclass="border-start border-20 border-danger p-3 bg-cream text-dark">
  .border-20
</div>

Offset border

You can set offset borders with @outputclass="offset-border" and the @otherprops="data-border()" parameter. Parameters of the data-border() parameter in order: {relative left position} {relative top position} {relative width change} {relative height change} {border width in pixels} {color}

<image href="..." outputclass="w-100 offset-border"
  otherprops="data-border(20 20 -40 -40 1 #fff)"/>
<image href="..." outputclass="w-100 offset-border" 
  otherprops="data-border(-20 -20 0 0 6 #f33)"/>
<image href="..." outputclass="w-100 offset-border"
  otherprops="data-border(-20 -20 0 0 6 #f33) style(position: relative; z-index: 1000;)"/>

Colors

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use @outputclass="text-*" utilities.

.bg-chocolate

.bg-velvet

.bg-dream

.bg-night

.bg-sky

.bg-fresh

.bg-rose

.bg-cream text-dark

<div outputclass="p-3 mb-2 bg-chocolate text-white">
  .bg-chocolate
</div>
<div outputclass="p-3 mb-2 bg-velvet text-white">
  .bg-velvet
</div>
<div outputclass="p-3 mb-2 bg-dream text-white">
  .bg-dream
</div>
<div outputclass="p-3 mb-2 bg-night text-white">
  .bg-night
</div>
<div outputclass="p-3 mb-2 bg-sky text-white">
  .bg-sky
</div>
<div outputclass="p-3 mb-2 bg-fresh text-white">
  .bg-fresh
</div>
<div outputclass="p-3 mb-2 bg-rose text-white">
  .bg-rose
</div>
<div outputclass="p-3 mb-2 bg-cream text-chocolate">
  .bg-cream
</div>