Borders

This lesson discusses how we'll deal with borders in our app.

Borders are commonly used in most apps. This is one of the easier topics to talk about. We’ll be talking about only two variables for borders:

  • --bd: The normal border color.
  • --bd-focus: The more stressed border color can be used on hover, for example.

Using alpha channel #

We’ll use an alpha channel with either white or black to create our borders. We’ll be using rgba again here:

  • Light theme
// We're aiming for a simple transparent black border, so we set the alpha channel of black:
$bd-light: rgba(0, 0, 0, 0.1);
$bd-focus-light: rgba(0, 0, 0, 0.2);
  • Dark theme
// We're aiming for a simple transparent white border, so we set the alpha channel of white:
$bd-dark: rgba(255, 255, 255, 0.1);
$bd-focus-dark: rgba(255, 255, 255, 0.2);

Some simple usages:

Get hands-on with 1000+ tech skills courses.