VueSimple

Border Classes

Use these utility classes to set element borders.

Border ​

These classes can be applied using the following format
u-border-{direction}

The direction designates the side the property applies to:

  • t - applies the border to top.
  • r - applies the border to right.
  • b - applies the border to bottom.
  • l - applies the border to left.
  • h - applies the border to both *-left and *-right.
  • v - applies the border to both *-top and *-bottom.
  • If left empty, applies the border in all directions. (Ex: u-border)

Border Radius ​

These classes can be applied using the following format
u-br-{direction}-{size}

The direction designates the side, the property applies to:

  • t - applies the border radius to both top-left & top-right.
  • tl - applies the border radius to top-left.
  • tr - applies the border radius to top-left.
  • b - applies the border radius to both bottom-left & bottom-right.
  • bl - applies the border radius to bottom-left.
  • br - applies the border radius to bottom-right.
  • l - applies the border radius to both bottom-left & top-left.
  • r - applies the border radius to both bottom-right & top-right.
  • If left empty/skipped, it sets border-radius of all sides to 4px. (Ex: u-br, u-br-xl)

The size controls the increment of border property:

  • 0 - sets border-radius to 0.
  • sm - sets border-radius to 2px.
  • If left empty, sets border-radius to 4px. (Ex: u-br-t, u-br)
  • lg - sets border-radius to 6px.
  • xl - sets border-radius to 8px.