Defining Border Color

Adjusting a User Interface border colors can enhance its appearance placing emphasis where needed. The border-color CSS property specifies the color of an element's border which can refine the visual hierarchy and aesthetic.

Let's interact with the border controls below to visualize how different border colors change the element border color.

border-color: #FFFFFF;

Shorthand Syntax

To make the code more readable, we can use the shorthand border-color property to set the four border colors in one line declaration.

• One value: All four borders will take the same color.
• Two values: The first value will be applied to the top and bottom borders, and the second will be applied to the right borders.
• Three values: The first value will be applied to the top border, a second to the left and right borders, and the third and last one will be applied to the bottom border.
• Four values: All values will be applied in a top/right/bottom/left clockwise order.

Change the color below to see the shorthand syntax in action.

border-color: #FFFFFF;

Challenge 1

We'll now challenge what we learned so far, let's apply different colors to each of the boxes below.

• Set a red border color to the first box, and a blue border color to the second one using the shorthand syntax border-color

Longhand Syntax

In some cases, and for some distinctive use cases we need to force the initial border-color which applies colors to all borders positions and only changes the border color of a specific position. In that case, using the longhand syntax will be more suitable to individually change the border color of that specific side.

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Let's play with the longhand syntax by applying a different border color to each position.

.element {
  border-top-color: #433878;
  border-right-color: #7E60BF;
  border-bottom-color: #E4B1F0;
  border-left-color: #FFE1FF;
}

Challenge 2

We have a product card that we want to enhance its style little a bit, so, let's change the border color to a more vibrant accent one, for that let's:

• Apply a #ea2cff left border color to the product card

Browser Support

All browsers support the border-color property, which has full support across major and modern browsers.

Stay updated with CSS!
Subscribe to our newsletter for new tutorials and expert tips.