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-xxs, .rounded-xs, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-xxl
  • .rounded — shorthand for .rounded-sm
  • .rounded-circle
  • .rounded-top, .rounded-top-left, .rounded-top-right, .rounded-right, .rounded-bottom, .rounded-bottom-left, .rounded-bottom-right, .rounded-left
.rounded-0 .rounded-xxs .rounded-xs .rounded-sm .rounded-md .rounded-lg .rounded-xl .rounded-xxl .rounded-circle
.rounded-top .rounded-top-left .rounded-top-right .rounded-right .rounded-bottom .rounded-bottom-left .rounded-bottom-right .rounded-left

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)