Pro

Border color

Add border or change the border color

Overview

It is possible to add a border and change the border color without writing any CSS code by using data-fx="{action}:border" and data-fx="{action}:border-{color}".

Add border

Add a border into any element by adding data-fx="{action}:border" for default light-grey border or data-fx="{action}:border-{color}" for colored border from theme colors.

On hover

To add a border on its hover, add data-fx="h:border" or data-fx="h:border-{color}" data attribute.

h:border
h:border-primary
<div data-fx="h:border">h:border</div>
<div data-fx="h:border-primary">h:border-primary</div>

On active

Add border when the element gets .active class using data-fx="a:border" or data-fx="a:border-{color}".

Click the element to toggle its .active class
a:border
a:border-primary
<div data-fx="a:border">a:border</div>
<div data-fx="a:border-primary">a:border-primary</div>

On trigger hover

Add a border to single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:border" or data-fx="th:border-{color}" data attribute to the elements you want to add a border when trigger is hovered.

Hover this trigger
th:border
th:border-primary
<div data-trigger="hover">
  <div data-fx="th:border">th:border</div>
  <div data-fx="th:border-primary">th:border-primary</div>
</div>

On trigger active

Add a border to single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="active" attribute to it, then add data-fx="ta:border" or data-fx="ta:border-{color}" data attribute to the elements you want to add a border when trigger is activated.

Click this trigger to toggle its .active class
ta:border
ta:border-primary
<div data-trigger="active">
  <div data-fx="ta:border">ta:border</div>
  <div data-fx="ta:border-primary">ta:border-primary</div>
</div>

Color change

Change the border color on {action} by adding data-fx="{action}:border-{color}" where {color} is one of the theme colors.

On hover

To change the border color of element on its hover, add data-fx="h:border-{color}" data attribute.

border to h:border-danger
border-primary to h:border-success
<div class="border" data-fx="h:border-danger">border to h:border-danger</div>
<div class="border-primary" data-fx="h:border-success">border-primary to h:border-success</div>

On active

Change the border color when the element gets .active class using data-fx="a:border-{color}"

Click the element to toggle its .active class
border to a:border-danger
border-primary to a:border-success
<div class="border-primary" data-fx="a:border-secondary">border-primary to a:border-secondary</div>
<div class="border-maroon" data-fx="a:border-olive">border-maroon to a:border-olive</div>
<div class="border-teal" data-fx="a:bg[navy]">border-teal to a:bg[navy]</div>

On trigger hover

Change a border color of single or multiple elements when the parent trigger is hovered. At first, indicate what is parent trigger element by adding data-trigger="hover" attribute to it, then add data-fx="th:border-{color}" data attribute to the elements you want to change the border color when trigger is hovered.

Hover this trigger
border to th:border-danger
border-primary to th:border-success
<div data-trigger="hover">
  <div class="border" data-fx="th:border-danger">border to th:border-danger</div>
  <div class="border-primary" data-fx="th:border-success">border-primary to th:border-success</div>
</div>

On trigger active

Change a border color of single or multiple elements when the parent trigger gets .active or .show class. At first, indicate what is parent trigger element by adding data-trigger="active" attribute to it, then add data-fx="ta:border-{color}" data attribute to the elements you want to change the border color when trigger is activated.

Click this trigger to toggle its .active class
border to ta:border-danger
border-primary to ta:border-success
<div data-trigger="active">
  <div class="border" data-fx="ta:border-danger">border to ta:border-danger</div>
  <div class="border-primary" data-fx="ta:border-success">border-primary to ta:border-success</div>
</div>