Skip to main content
Version: 10.5

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​

Result
Loading...
Live Editor
<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>
Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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​

Result
Loading...
Live Editor
<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>