Borders

This guide covers the utility classes available for controlling an element’s borders, including width, style, and color. 🖼️

Borders

Use the .ro-u-border utility class to apply a default 1px solid border to any element. You can then combine it with modifier classes to change its width, style, and color.

<div class="ro-u-border">Default border</div>

Preview

Default border

---

Width

Control the border width using .ro-u-border-width-* classes.

<div class="ro-u-border ro-u-border-width-2">Border width 2px</div>
<div class="ro-u-border ro-u-border-width-4">Border width 4px</div>

Preview

Border width 2px

Border width 4px

---

Style

Change the border style using the .ro-u-border-style-* classes. The default style is solid.

<div class="ro-u-border ro-u-border-style-dashed">Dashed border</div>

Preview

Dashed border

---

Color

Modify the border color using the .ro-u-border-color-* utility classes.

<div class="ro-u-border ro-u-border-color-light">Light</div>
<div class="ro-u-border ro-u-border-color-regular">Regular</div>
<div class="ro-u-border ro-u-border-color-accentuated">Accentuated</div>
<div class="ro-u-border ro-u-border-color-product">Product</div>
<div class="ro-u-border ro-u-border-color-success">Success</div>
<div class="ro-u-border ro-u-border-color-warning">Warning</div>
<div class="ro-u-border ro-u-border-color-danger">Danger</div>

Preview

Light

Regular

Accentuated

Product

Success

Warning

Danger

---

Radius

Apply border radius using .ro-u-radius-* classes.

<div class="ro-u-border ro-u-radius-sm ro-u-p-2">Small Radius</div>
<div class="ro-u-border ro-u-radius-md ro-u-p-2">Medium Radius</div>
<div class="ro-u-border ro-u-radius-lg ro-u-p-2">Large Radius</div>
<div class="ro-u-border ro-u-radius-xl ro-u-p-2">Extra Large Radius</div>
<div class="ro-u-border ro-u-radius-circle ro-u-p-2 ro-u-w-10 ro-u-h-10 ro-u-flex-center">Circle</div>

Preview

Small

Medium

Large

XL

Circle

---

Properties

Class Prefix	Description
.ro-u-border	Applies the base border styles (1px solid regular).
.ro-u-border-width-*	Changes border width. Options: 2, 4.
.ro-u-border-style-*	Changes border style. Options: dashed.
.ro-u-border-color-*	Changes border color. Options: light, regular, accentuated, product, success, warning, danger.
.ro-u-radius-*	Changes border radius. Options: sm, md, lg, xl, circle.