Borders

This component provides a comprehensive set of utility classes for controlling borders, border styles, border radius, and special animated border effects in Metro UI.

Overview

The border.less file defines various CSS classes for manipulating borders on elements, including utilities for removing borders, setting border styles, controlling border radius, and creating animated border effects.

CSS Variables

Border Radius

Variable	Default Value
--border-radius	6px

Gradient Border

Variables

Variable	Default Value	Description
--gradient-border-speed	3s	Duration of the border animation
--gradient-border-size	2px	Width of the animated border
--gradient-border-colors	#ff4545, #00ff99, #006aff, #ff0095, #ff4545	Default colors for animated borders

Classes

Class	Description
.gradient-border	Applies an gradient border effect

<div class="box" style="height: 300px; width: 300px;">
    <div class="box text-center gradient-border">...</div>
    <div class="box text-center gradient-border"
        style="--gradient-border-colors: var(--color-violet), var(--color-cyan), var(--color-violet)">...</div>
</div>

Animated Border Classes

Variables

Variable	Default Value	Description
--animated-border-speed	3s	Duration of the border animation

Class	Description
.animated-border	Applies an animated rotating border effect
.animated-border-hover	Applies the animated border effect only on hover
.animated-border-{color}	Applies the gradient border effect with a specific color

<div class="box" style="height: 300px; width: 300px;">
    <div class="box text-center gradient-border animated-border">...</div>
    <div class="box text-center animated-border-red">...</div>
</div>

Border Removal Classes

No Border Classes

Class	Description
.no-border	Removes all borders
.no-border-left	Removes left border
.no-border-right	Removes right border
.no-border-top	Removes top border
.no-border-bottom	Removes bottom border
.no-border-visible	Makes borders transparent

Border None Classes (Alternative Syntax)

Class	Description
.border-none	Removes all borders
.border-left-none	Removes left border
.border-right-none	Removes right border
.border-top-none	Removes top border
.border-bottom-none	Removes bottom border
.border-visible-none	Makes borders transparent

Border Addition Classes

Class	Description
.border	Adds a 1px transparent border on all sides
.border-left	Adds a 1px transparent border on the left
.border-right	Adds a 1px transparent border on the right
.border-top	Adds a 1px transparent border on the top
.border-bottom	Adds a 1px transparent border on the bottom

Border Radius Classes

Class	Description
.border-radius, .rounded	Applies the default border radius (6px)
.border-radius-half, .to-cycle	Makes the element circular (border-radius: 50%)
.border-radius-1 through .border-radius-20	Sets specific border radius from 1px to 20px

Border Size Classes

Class	Description
.border-size-1 through .border-size-20	Sets border width from 1px to 20px

Border Style Classes

Class	Description
.border-solid	Sets solid border style
.border-dashed	Sets dashed border style
.border-dotted	Sets dotted border style
.border-double	Sets double border style
.border-groove	Sets groove border style
.border-inset	Sets inset border style
.border-outset	Sets outset border style
.border-ridge	Sets ridge border style

Responsive Border Classes

The file includes responsive variants for border removal classes that apply at different breakpoints:

Class	Description
.border-none-{breakpoint}	Removes all borders at specified breakpoint
.border-top-none-{breakpoint}	Removes top border at specified breakpoint
.border-right-none-{breakpoint}	Removes right border at specified breakpoint
.border-bottom-none-{breakpoint}	Removes bottom border at specified breakpoint
.border-left-none-{breakpoint}	Removes left border at specified breakpoint

Where {breakpoint} can be: xs, sm, md, lg, xl, xxl, xxxl

Usage Examples

Basic Border Utilities

<!-- Adding borders -->
<div class="border">Element with a 1px transparent border</div>
<div class="border border-solid">Element with a 1px solid border</div>

<!-- Removing borders -->
<div class="no-border">Element with no border</div>
<div class="border-top-none">Element with no top border</div>

<!-- Border radius -->
<div class="rounded">Element with default border radius</div>
<div class="to-cycle">Circular element</div>
<div class="border-radius-10">Element with 10px border radius</div>

<!-- Border size -->
<div class="border border-solid border-size-3">Element with 3px solid border</div>

<!-- Border style -->
<div class="border border-dashed">Element with dashed border</div>

Responsive Border Utilities

<!-- Border that disappears on medium screens and above -->
<div class="border border-solid border-none-md">
    This element has a border on small screens only
</div>

Notes

• To use animated borders, the parent element must have position: relative (this is automatically applied by the CSS).
• Animated borders use CSS @property and conic gradients, which may not be supported in all browsers.
• Border colors can be set using standard CSS, or by combining with Metro UI color utility classes.