or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

borders.mdcolor-functions.mdindex.mdlayout-positioning.mdtypography-display.mdutilities.mdvariables-constants.md
tile.json

borders.mddocs/

Border Utilities

Comprehensive border styling with individual edge control and shorthand support. These mixins provide fine-grained control over border properties with support for null values to skip specific edges.

Capabilities

Border Color Mixin

Sets border-color on specific edges using CSS shorthand notation.

/**
 * Sets border-color on specific edges
 * @param $values - List of colors accepting CSS shorthand notation
 *                 Supports null values to skip specific edges
 * @requires _directional-property function for processing
 * @requires _is-color function for validation
 */
@mixin border-color($values);

Usage Examples:

// Multiple border colors
.card {
  @include border-color(#a60b55 #76cd9c null #e8ae1a);
  // Result:
  // border-top-color: #a60b55;
  // border-right-color: #76cd9c;
  // border-left-color: #e8ae1a;
}

// Uniform border color
.box {
  @include border-color(#333);
  // Result:
  // border-color: #333;
}

// Horizontal borders only
.separator {
  @include border-color(#ccc null);
  // Result:
  // border-top-color: #ccc;
  // border-bottom-color: #ccc;
}

Border Style Mixin

Sets border-style on specific edges using CSS shorthand notation.

/**
 * Sets border-style on specific edges
 * @param $values - List of border styles accepting CSS shorthand notation
 *                 Supports null values to skip specific edges
 * @requires _directional-property function for processing
 */
@mixin border-style($values);

Usage Examples:

// Mixed border styles
.element {
  @include border-style(dashed null solid);
  // Result:
  // border-top-style: dashed;
  // border-bottom-style: solid;
  // border-left-style: solid;
  // border-right-style: solid;
}

// Uniform border style
.outlined {
  @include border-style(solid);
  // Result:
  // border-style: solid;
}

// Top and bottom only
.divider {
  @include border-style(solid null);
  // Result:
  // border-top-style: solid;
  // border-bottom-style: solid;
}

Border Width Mixin

Sets border-width on specific edges using CSS shorthand notation.

/**
 * Sets border-width on specific edges
 * @param $values - List of border widths accepting CSS shorthand notation
 *                 Supports null values to skip specific edges
 * @requires _directional-property function for processing
 * @requires _is-length function for validation
 */
@mixin border-width($values);

Usage Examples:

// Variable border widths
.element {
  @include border-width(1em null 20px);
  // Result:
  // border-top-width: 1em;
  // border-bottom-width: 20px;
  // border-left-width: 20px;
  // border-right-width: 20px;
}

// Uniform border width
.framed {
  @include border-width(2px);
  // Result:
  // border-width: 2px;
}

// Thick left border (accent pattern)
.accented {
  @include border-width(null null null 4px);
  // Result:
  // border-left-width: 4px;
}

Border Radius Mixins

Sets border-radius on specific corners with individual control.

/**
 * Sets top-left and top-right border radius
 * @param $radii - Border radius value(s)
 */
@mixin border-top-radius($radii);

/**
 * Sets top-right and bottom-right border radius
 * @param $radii - Border radius value(s)
 */
@mixin border-right-radius($radii);

/**
 * Sets bottom-left and bottom-right border radius
 * @param $radii - Border radius value(s)
 */
@mixin border-bottom-radius($radii);

/**
 * Sets top-left and bottom-left border radius
 * @param $radii - Border radius value(s)
 */
@mixin border-left-radius($radii);

Usage Examples:

// Rounded top corners
.modal {
  @include border-top-radius(8px);
  // Result:
  // border-top-left-radius: 8px;
  // border-top-right-radius: 8px;
}

// Rounded right side
.tab {
  @include border-right-radius(4px);
  // Result:
  // border-top-right-radius: 4px;
  // border-bottom-right-radius: 4px;
}

// Rounded bottom corners
.dropdown {
  @include border-bottom-radius(6px);
  // Result:
  // border-bottom-left-radius: 6px;
  // border-bottom-right-radius: 6px;
}

// Rounded left side
.sidebar {
  @include border-left-radius(10px);
  // Result:
  // border-top-left-radius: 10px;
  // border-bottom-left-radius: 10px;
}

// Different radius values
.card {
  @include border-top-radius(8px 4px);
  // Result:
  // border-top-left-radius: 8px 4px;
  // border-top-right-radius: 8px 4px;
}

Combined Usage Patterns

Complete Border Definition

.card {
  @include border-width(1px);
  @include border-style(solid);
  @include border-color(#ddd);
  @include border-top-radius(8px);
  
  // Equivalent to:
  // border: 1px solid #ddd;
  // border-top-left-radius: 8px;
  // border-top-right-radius: 8px;
}

Selective Border Styling

.sidebar {
  // Only right border
  @include border-width(null 1px null null);
  @include border-style(null solid null null);
  @include border-color(null #e0e0e0 null null);
  
  // Result:
  // border-right-width: 1px;
  // border-right-style: solid;
  // border-right-color: #e0e0e0;
}

Button with Accent Border

.button {
  @include border-width(1px 1px 3px 1px);
  @include border-style(solid);
  @include border-color(#007acc #007acc shade(#007acc, 20%) #007acc);
  @include border-top-radius(4px);
  
  &:active {
    @include border-width(3px 1px 1px 1px);
    @include border-color(shade(#007acc, 20%) #007acc #007acc #007acc);
  }
}

Card with Gradient Border Effect

.gradient-card {
  // Create layered border effect
  @include border-width(1px);
  @include border-style(solid);
  @include border-color(transparent);
  @include border-top-radius(12px);
  
  background: 
    linear-gradient(white, white) padding-box,
    linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
}

Shorthand Processing

Border mixins support CSS shorthand notation:

  • One value: Applied to all edges (1px → all borders)
  • Two values: Vertical and horizontal (1px 2px → top/bottom, left/right)
  • Three values: Top, horizontal, bottom (1px 2px 3px)
  • Four values: Top, right, bottom, left (1px 2px 3px 4px)

Null Value Behavior

Using null in border shorthand:

.example {
  // Only set top and bottom borders
  @include border-color(red null);
  @include border-width(2px null);
  @include border-style(solid null);
  
  // Result: Only generates top and bottom border properties
  // border-top-color: red;
  // border-bottom-color: red;
  // border-top-width: 2px;
  // border-bottom-width: 2px;
  // border-top-style: solid;
  // border-bottom-style: solid;
}

Common Design Patterns

Material Design Cards

.material-card {
  @include border-top-radius(4px);
  // Use box-shadow instead of borders for material design
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Tab Navigation

.tab {
  @include border-width(1px 1px null 1px);
  @include border-style(solid);
  @include border-color(#ccc);
  @include border-top-radius(4px);
  
  &.active {
    @include border-bottom-radius(0);
    border-bottom-color: transparent;
  }
}

Alert Components

.alert {
  @include border-width(null null null 4px);
  @include border-style(null null null solid);
  @include border-left-radius(2px);
  
  &.error {
    @include border-color(null null null #dc3545);
  }
  
  &.success {
    @include border-color(null null null #28a745);
  }
  
  &.warning {
    @include border-color(null null null #ffc107);
  }
}

Error Handling

Border mixins validate their arguments:

// Invalid color value
.invalid {
  @include border-color("not-a-color");
  // Error: Invalid color value
}

// Invalid length value  
.also-invalid {
  @include border-width("not-a-length");
  // Error: Invalid length value
}

Always use valid CSS values to avoid compilation errors.