Huesos
Style
Guide

Repositoire

GitHub

text-border

($border-color, $border-width, $text-color)

Another little trick to pull off from the hat when needed.

Sets a text-stroke with a fallback for less capable browsers. Ideal for those pesky headings that need to contrast against an image.

Uses the tecnique defined on Adding stroke to web text.

Parameters

  • $border-color - Defines the border-color
  • $border-width - Defines the border width, defaults to 1px
  • $text-color - Defines the color of the text. A false value won’t apply any change.

Example

.text-border {
    @include text-border($indigo8, 3px, transparent);
}
<h1 class="text-border">I have a text border</h1>

I have a text border

Reference

Adding stroke to web text.