Defining Border Style

Borders enhances user interfaces by offering clarity and creating visually intuitive boundaries. With the help of such properties as border-style, it is possible to add structure to layouts and separate information, helping enhance the user experience with the use of values such as solid, dotted, or dashed.

So, to see how all of the current keyword border styles look, let's experiment with the border controls.

border-style: solid;

We can use the following border styles:

• solid: An uninterrupted, and continuous line.
• dotted: A collection of rounded dots.
• dashed: A series of dashes.
• double: Two lines that are parallel.
• ridge, groove: Borders that provide a certain optical illusion of a third dimension.
• inset, outset: Borders that mimic an implied or inherent look.
• hidden, none: No border is rendered

Each style remarkably changes the element, from a disruptive to an engaging one, depending on the case.

Challenge 1

Now, let's put our knowledge to the test. Using the border-style property, apply a dotted border to the first box and a dashed border to the second box.

Challenge 2

We have two text input fields First Name and Last Name using a dashed border style which is not usually used in this type of user interface. Let's modify the border-style to use continuous lines to create a more refined and intuitive text input form control style.

Shorthand Syntax

To control an element's border styles on each side using one line of code, we can use the border-style shorthand syntax, which offers more readability and flexibility by applying one to four values.

• One value: applies the same style to all sides combined.
• Two values: the first value applies to top/bottom, the second to left/right.
• Three values: the first value applies to the top, the second to left/right, and the third value to the bottom.
• Four values apply styles in clockwise order: top, right, bottom, and left respectively.

Let's see it in action:

border-style: dashed dotted solid none;

Challenge 3

Let's practice what we learned! While using the border-style shorthand property with different values, apply for each box its specified border style:

• Box 1: Use one value to apply a solid border on all sides.
• Box 2: Using two values, apply an inset border on the top/bottom, and an outset border on the left/right.
• Box 3: Using three values, apply a double border on the bottom, a dashed border on the top, and a hidden border on the left/right.
• Box 4: Using four values, apply a ridge border on the left, a dashed border on the top, a groove border on the right, and a dotted border on the bottom.

Long Syntax

When we need even more control, we can use the border-style property with long syntax. This allows us to individually define each side of an element's border. It's perfect for creating complex and visually distinct layouts.

Instead of applying a single style to all sides at once, or even grouping them in pairs, we can explicitly control each side of the border using long syntax. This is particularly useful when we need borders that vary in appearance. For example:

.element {
  border-top-style: solid;
  border-right-style: dashed;
  border-bottom-style: dotted;
  border-left-style: dashed;
}

In this example:

• The top border is solid.
• The right border is dashed.
• The bottom border is dotted.
• The left border is dashed too.

This approach provides ultimate flexibility, allowing us to fully customize how each side of the border looks. It can also improve readability when we have complex designs that require distinct border styles on different sides of an element.

This control over individual sides opens up design possibilities, from creating visually distinct box elements to more subtle visual cues in layouts.

If we need to adjust just one side of the border without affecting the others, long syntax is the most direct approach. However, keep in mind that long syntax tends to require more code compared to the shorthand version. Use it when you need the precision, and shorthand when you want efficiency.

Challenge 4

Let's put our long syntax skills to the test! Using the longhand properties, set the border styles individually for each side of the boxes:

• Box 1: Set the top border style to dashed
• Box 2: Set the right border style to solid
• Box 3: Set the bottom border style to dotted
• Box 4: Set the left border style to double

Border Style hidden vs none

When we're styling tables—especially those using the border-collapse: collapse property—the distinction between border-style: none and border-style: hidden becomes significant due to how border conflicts are resolved.

Understanding the Basics

• border-style: none: This means that the element does not display a border on the specified edge. However, it doesn't prevent adjacent borders from being displayed.
• border-style: hidden: This not only means that the element doesn't display a border on the specified edge but also suppresses any borders from adjacent elements on that edge.

.element--1 {
  border-right: 10px solid red;
}

      
      
.element--2 {
  border-color: white;
  border-style-left: solid;
  border-style-right: solid;
}

      
      
.element--3 {
  border-right: 10px solid yellow;
}

Resolving Border Conflicts

When we have a table or display: table with collapsed borders (border-collapse: collapse), borders from adjacent cells can overlap. CSS has specific rules to determine which border to display when there's a conflict. The key points are:

Effect of hidden

• If one cell's border is set to hidden and the adjacent cell's border is set to any other style (including solid), the hidden style takes precedence.
• The border will not be displayed on that edge, effectively suppressing any adjacent borders.

Effect of none

• If one cell's border is set to none and the adjacent cell's border is set to a visible style (e.g., solid), the visible border from the adjacent cell will be displayed.
• The none style does not prevent adjacent borders from rendering.

Challenge 5

Let's put our knowledge of border-style: none and border-style: hidden to the test! We have a table with three cells, and we want to manipulate the borders of the middle cell.

Your task is to modify the CSS for the middle cell (.table__cell--2) to achieve the following:

1. Make the left border of the middle cell completely disappear, including any border from the adjacent cell.
2. Remove the right border of the middle cell, but allow the border of the right adjacent cell to be visible.

Remember the difference between none and hidden:

• hidden will suppress borders from adjacent cells
• none will remove the border but allow adjacent borders to show

Browser Support

The border-style property has full cross-browser support.

CSS has so much more to offer! This border-style deep dive is part of our modern CSS series. Ready to level up? Subscribe to our newsletter for more tutorials and tips.