archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity
tailwindcss/docs/source/border-color.blade.md
Jonathan Reinink 29e2f104ca Update documentation urls
2017-10-30 09:22:42 -04:00

1.3 KiB
Raw Blame History

extends title
_layouts.markdown Border Color

Border Color

Colors

By default, borders use the @default-border-color. To override a border color, add one of the border color utilities.

<div class="border border-smoke-darker"></div>
<div class="border border-smoke-dark"></div>
<div class="border border-smoke"></div>

<div class="border border-white"></div>
<div class="border border-smoke-lighter"></div>
<div class="border border-smoke-light"></div>

<div class="border border-invisible"></div>

div {
  .border-smoke-darker;
  .border-smoke-dark;
  .border-smoke;

  .border-white;
  .border-smoke-lighter;
  .border-smoke-light;

  .border-invisible;
}

The default border colors can also be modified using the following variables.

// Variable:            Default:
@border-smoke-darker:           hsl(0, 0%, 82%);
@border-smoke-dark:      hsl(0, 0%, 90%);
@border-smoke:    hsl(0, 0%, 96%);

@border-white:          hsl(0, 0%, 100%);
@border-smoke-lighter:     hsl(0, 0%, 60%);
@border-smoke-light:   hsl(0, 0%, 35%);

@default-border-color:  @border-smoke-dark;