Borders

Use border utilities to easily style the border and border-radius of an element. This is especially useful for images, buttons, and other elements.

Below, you can see how to set the border, adjust the border width, omit the border, set the border color, and add a border radius.

Additive

<div className="example-block">
    <span className="hf-border"></span>
    <span className="hf-border-top"></span>
    <span className="hf-border-right"></span>
    <span className="hf-border-bottom"></span>
    <span className="hf-border-left"></span>
</div>

<div className="example-block">
    <span className="hf-border-2"></span>
    <span className="hf-border-top-2"></span>
    <span className="hf-border-right-2"></span>
    <span className="hf-border-bottom-2"></span>
    <span className="hf-border-left-2"></span>
</div>

Subtractive

<div className="example-block">
    <span className="hf-border-top-0"></span>
    <span className="hf-border-right-0"></span>
    <span className="hf-border-bottom-0"></span>
    <span className="hf-border-left-0"></span>
</div>

Border Color

<div className="example-block">
    <span className="hf-border hf-border-primary"></span>
    <span className="hf-border hf-border-secondary"></span>
    <span className="hf-border hf-border-success"></span>
    <span className="hf-border hf-border-warning"></span>
    <span className="hf-border hf-border-danger"></span>
    <span className="hf-border hf-border-error"></span>
    <span className="hf-border hf-border-info"></span>
    <span className="hf-border hf-border-light"></span>
    <span className="hf-border hf-border-dark"></span>
</div>

Border Radius

<div className="example-block dark">
    <span className="hf-rounded"></span>
    <span className="hf-rounded-top"></span>
    <span className="hf-rounded-right"></span>
    <span className="hf-rounded-bottom"></span>
    <span className="hf-rounded-left"></span>
    <span className="hf-rounded-circle"></span>
    <span className="hf-rounded-0"></span>
</div>