Borders

go.raybo.org/2cDq

There are styles that allow you to control the look of border elements.

Border Width

  • border(-SID)(-AMT)
    • SID

      t r b l
    • AMT (border-width)

      0 2 4 8

Docs Try it

You can specify the width of a border in one of four directions. Top, Right Bottom and Left and then you can use a size. It feels sort of odd that there are only four options for size.

By the way, if you just say border, then it creates a one pixel size, so you can say border-l for a one pixel border on the left side.

Border Opacity

  • border-opacity-AMT
    • AMT (opacity/100)

      0 5 10 20 25 30 40 50
      60 70 75 80 90 95 100

Docs Try it

You can modify the border opacity with one of these values. Notice that there are more at the beginning and at the end of this scale, but otherwise they increment by 10 units.

The nice thing about this way of setting borders is that you don't have to create an extra element to make the text opacity different than the border. Tailwind uses a custom variable to take care of this.

Border Color

  • border-COL-STR
transparent transparent black white
gray red yellow green blue indigo purple pink
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900
50 100 200 300 400 500 600 700 800 900

Docs Try it

The border colors just as you'd expect are trasnparent, black white and current...which sets the color to whatever the current color is set to. Plus the traditional gray, red, yellow, etc. and the strengths go from 100 to 900.

Border Radius

  • rounded-(SID)(-AMT)

    • COL

      t tl r tr b br l bl

    • AMT

      none full sm md lg xl 2xl 3xl

Docs Try it

Border radius is one of those interesting classes in that the class isn't named like it's CSS counterpart. It's called rounded instead.

You can also specify not just the sides, but also he corners, so you use the top right bottom left, but also a combination so you can modify each corner.

The sizes are pretty standard and are all based on REMs, which is the root ems that browsers typically define as 16 pixels.

You can also just use the rounded keyword, in which case it will use a .15 rem size. You can see the sizes in action in the example.

Although the 3xl looks pretty large, the full size is set to an infinite amount, which practically is 9999 pixels.

Border Style

  • border-(STL)
    • STL (border-style)

      none solid dashed dotted double

Docs Try it

There's a few border styles available. Interstingly enough the double style doesn't work well unless the border is set to 4 or 8 pixels.