or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-timing.mdborder-utilities.mdbrowser-support.mdcolor-functions.mdform-input-selectors.mdindex.mdlayout-positioning.mdmathematical-utilities.mdshapes-graphics.mdtext-content.mdtypography.md
tile.json

border-utilities.mddocs/

Border Utilities

Border utilities for setting border properties with CSS shorthand support and directional control, plus specialized border-radius mixins.

Capabilities

Border Color Mixin

Sets border-color with directional control using CSS shorthand syntax.

/**
 * Sets border-color with directional control
 * @param $values - List of colors supporting CSS shorthand and null values
 */
@mixin border-color($values);

Usage Examples:

.element {
  @include border-color(red null blue null);
}
// Result:
// border-top-color: red;
// border-bottom-color: blue;

.card {
  @include border-color(#ccc);
}
// Result:
// border-color: #ccc;

Border Width Mixin

Sets border-width with directional control using CSS shorthand syntax.

/**
 * Sets border-width with directional control
 * @param $values - List of width values supporting CSS shorthand and null values
 */
@mixin border-width($values);

Usage Examples:

.thick-top {
  @include border-width(3px null 1px null);
}
// Result:
// border-top-width: 3px;
// border-bottom-width: 1px;

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

Border Style Mixin

Sets border-style with directional control using CSS shorthand syntax.

/**
 * Sets border-style with directional control
 * @param $values - List of border styles supporting CSS shorthand and null values
 */
@mixin border-style($values);

Usage Examples:

.mixed-borders {
  @include border-style(solid null dashed null);
}
// Result:
// border-top-style: solid;
// border-bottom-style: dashed;

.dotted-border {
  @include border-style(dotted);
}
// Result:
// border-style: dotted;

Border Radius Mixins

Specialized mixins for setting border-radius on specific corners.

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

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

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

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

Usage Examples:

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

.rounded-left {
  @include border-left-radius(12px);
}
// Result:
// border-top-left-radius: 12px;
// border-bottom-left-radius: 12px;

.card-header {
  @include border-top-radius(6px);
  background: #f5f5f5;
}

.card-footer {
  @include border-bottom-radius(6px);
  background: #e9e9e9;
}

Complete Border Examples

Card Component

.card {
  @include border-width(1px);
  @include border-style(solid);
  @include border-color(#ddd);
  
  .card-header {
    @include border-bottom-radius(0);
    @include border-top-radius(6px);
  }
  
  .card-footer {
    @include border-top-radius(0);
    @include border-bottom-radius(6px);
  }
}

Button Variants

.button {
  @include border-width(2px);
  @include border-style(solid);
  @include border-color(transparent);
  
  &.outlined {
    @include border-color(currentColor);
    background: transparent;
  }
  
  &.top-accent {
    @include border-width(3px null 1px null);
    @include border-color(#3498db null #ddd null);
  }
}

Form Elements

.input-group {
  .input {
    @include border-width(1px);
    @include border-style(solid);
    @include border-color(#ccc);
    @include border-right-radius(0);
  }
  
  .button {
    @include border-width(1px null 1px 0);
    @include border-style(solid);
    @include border-color(#3498db);
    @include border-left-radius(0);
  }
}