Skip to Main Content

Borders

Using Borders

This attribute assigns a border to the selected side of the element. It allows you to customize the thickness, style, and color.

Markup

<div data-c-border="SIDE(THICKNESS, STYLE, COLOR)">

Available Arguments

# SIDE

all
top
right
bottom
left
tb (Top and Bottom)
rl (Right and Left)
# THICKNESS

thin
thick
# STYLE

solid
dashed
# COLOUR

white
gray / grey
black
c1 (Theme Colour 01)
c2 (Theme Colour 02)
c3 (Theme Colour 03)
c4 (Theme Colour 04)
c5 (Theme Colour 05)
stop
slow
go

In Practice

<!--A thick, solid, black border on the top of the element.-->
<div data-c-border="top(thick, solid, black)"></div>
<!--A thin, dashed, theme colour 5 border on all sides.-->
<div data-c-border="all(thin, dashed, c5)"></div>

Changelog

Version 2.3.6