Borders
Set or remove borders.
Set borders
Use env-border
or env-border-{p}
to set border on one or more sides.
Valid values for {p}
are: block
, inline
, block-start
, block-end
, inline-start
, inline-end
.
You can use env-border--05
to set a muted border color.
<div class="example-borders">
<span class="env-border"></span>
<span class="env-border env-border--05"></span>
<span class="env-border-block"></span>
<span class="env-border-inline"></span>
<span class="env-border-block-start"></span>
<span class="env-border-block-end"></span>
<span class="env-border-inline-start"></span>
<span class="env-border-inline-end"></span>
</div>
Remove borders
Use env-border-none
to remove a border from all sides.
<div class="example-borders">
<span style="border: 3px dashed red" class="env-border-none"> </span>
</div>
Deprecated
Physical properties & modifiers
Since 2023.11.1, classnames env-border-top
, env-border-right
, env-border-bottom
and env-border-left
are deprecated and replaced by logical properties.
Modifiers env-border--0
and env-border--{p}-0
are deprecated, where env-border--0
is replaced by env-border-none
.
Since 2025.03.1, variable --env-border-color-light
is deprecated and replaced by --env-border-color-05
.