Borders, radius and dividers

Borders

Use border classes to add or remove borders on your element.

Here are all the supported classes:

  • .border
  • .border-top
  • .border-bottom
  • .border-left
  • .border-right
  • .border-0
  • .border-top-0
  • .border-bottom-0
  • .border-left-0
  • .border-right-0
.border .border-top .border-right .border-bottom .border-left
.border-0 .border-top-0 .border-right-0 .border-bottom-0 .border-left-0

Border radius

Use border radius classes to add border-radius or to remove it from on your element.

Here are all the supported classes:

  • .rounded-0
  • .rounded-4 or .rounded
  • .rounded-8
  • .rounded-12
  • .rounded-24
  • .rounded-circle
  • .rounded-top, .rounded-right, .rounded-bottom, .rounded-left
.rounded-0 .rounded-4 .rounded-8 .rounded-12 .rounded-24 .rounded-circle
.rounded-top .rounded-right .rounded-bottom .rounded-left
Deprecated! .rounded-5, .rounded-10, .rounded-20 are deprecated, will be removed soon.

Horizontal divider

hr tag element (default)


hr with .hr-disabled (disabled state)


hr with .hr-dotted class


hr with .hr-dotted and .hr-disabled (disabled state for dotted divider)


hr with .hr-nc-dotted class


hr with .hr-nc-dotted and .hr-disabled (disabled state for nc dotted divider)

				
<!-- Borders -->
<div class="border">Add border to this div</div>
<div class="border-top">Add top border on this div</div>
<div class="border-bottom-0">Remove the bottom border on this div</div>

<!-- Radius -->
<div class="rounded">Add the default rounded corners (4px) to this element (div/image/etc.)</div>
<div class="rounded-0">Remove the rounded corners of this element (div/image/etc.)</div>
<div class="rounded-4">Add the 4px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-8">Add the 8px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-12">Add the 12px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-24">Add the 24px rounded corners to this element (div/image/etc.)</div>
<div class="rounded-circle">Make this element (div/image/etc.) a circle</div>

<div class="rounded-top">Add the default rounded corners (4px) to the top left and right corners of this element (div/image/etc.)</div>
<div class="rounded-right">Add the default rounded corners (4px) to the top right and bottom right corners of this element (div/image/etc.)</div>
<div class="rounded-bottom">Add the default rounded corners (4px) to the bottom left and right corners of this element (div/image/etc.)</div>
<div class="rounded-left">Add the default rounded corners (4px) to the bottom left and top left corners of this element (div/image/etc.)</div>

<!-- Horizontal divider -->
<hr class="">
<hr class="hr-disabled">
<!-- Dotted divider -->
<hr class="hr-dotted">
<hr class="hr-dotted hr-disabled">
<!-- NC dotted divider -->
<hr class="hr-nc-dotted">
<hr class="hr-nc-dotted hr-disabled">