Note: Always declare the border-style or the border-top-style property before the `border-top-color`property. An element must have a border before you can change the color.

Show demo ❯

Default value: The current color of the element Inherited: no Animatable: yes. Read about animatable Try it Version: CSS1 JavaScript syntax: object.style.borderTopColor="blue" Try it

---

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property border-top-color 1.0 4.0 1.0 1.0 3.5

---

---

CSS Syntax

border-top-color: color|transparent|initial|inherit;

Property Values

Value Description Demo color Specifies the color of the top border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element Demo ❯ transparent Specifies that the border color should be transparent Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit

Adding a border between columns and rows in a CSS grid layout is a typical design pattern. While it’s easy to achieve in a design tool like Figma, it comes with a lot of challenges in a development environment.

Sure, there are a lot of manual, non-scalable ways to achieve this look. In fact, every time I’ve seen it done, the approach was very messy, inflexible, and hard to manage.

In this article, I’m going to explain my approach to solving the challenge of internal borders between rows and columns in a grid layout. While it might not be the only great approach, it’s both efficient and resilient.

Goals & Requirements

Here’s what we’re trying to achieve:

If we’re going to do this right, a few things need to be accounted for:

1. We need the freedom to change the number of grid columns without breaking the borders.
2. A grid with a missing grid item should not break the borders.
3. The borders should degrade gracefully from breakpoint to breakpoint – we must avoid changing our instructions at various breakpoints if possible.
4. We want to avoid crazy :nth() selector tactics. If we’re forced to try and programmatically select items in the grid based on counting, we will lose our flexibility to change column counts.

Full Video Tutorial

There’s a complete write-up below, but if you’re the kind of person who prefers to watch a video, here you go:

Step

1: Basic HTML

We’re going to start with a basic 3-column grid:

`

`Code language: HTML, XML (xml)

Step

1: Establish a Grid with CSS & Hide Any Overflow

Let’s make this a basic, 3-column grid:

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

We need to hide all overflow in this grid because it’s going to singlehandedly solve a bunch of challenges that this design goal presents. In fact, hiding overflow allows us to avoid using :nth() selectors altogether.

Don’t mind the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

0 situation here. I’ll explain that in a moment.

Step

2: Relative Positioning for Grid Items

Contrary to most popular approaches, we’re not going to use borders. We’re going to use pseudo-elements for almost everything. Why? Because borders will have too many limitations for what we want to achieve and will force us to use :nth() selectors and media queries.

Since we need to position the pseudo-elements absolutely, we need to set the parents to position relative. We can do this on all grid items.

`.grid__item { position: relative; } `Code language: CSS (css)

Now, our parent elements are ready to have pseudo-elements attached. Before we do that, though, let’s create some locally scoped variables…

Step

3: Locally Scoped Variables

We want to make this situation as easy as possible to manipulate and maintain. Locally scoped variables will make our lives a lot easier.

`.grid { --gap: 2em; --line-offset: calc(var(--gap) / 2); --line-thickness: 2px; --line-color: red; } `Code language: CSS (css)

Our grid needs a gap, which we define with the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

2 variable. When I do this IRL, I map this to the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

3 contextual variable from Automatic.css. For the sake of this example, though, I’m just using 2em.

When we position the “borders” in the grid, we need to position them dead center in the middle of the grid gaps. In order to do that, we need a token that represents half the value of the grid-gap. This is mapped to a token called

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

4. I didn’t call it border-offset because we’re not actually using borders.

Next is the thickness of the lines, which is mapped to a token called

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

5. Pretty straightforward.

Last, we need to decide what color we want our lines to be. This is controlled via a

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

6 token.

Now that our tokens are locked and loaded, we can move forward.

Step

4: Establish Base CSS for Pseudo Elements

We’re going to use both

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

7 and

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

8elements for this technique. Both will share some styling, so in the interest of efficiency and not repeating ourself (DRY development), we’ll establish shared styles first:

`.grid__item::before, .grid__item::after { content: ''; position: absolute; background-color: var(--line-color); z-index: 1; } `Code language: CSS (css)

This effectively creates a

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

7 and

`.grid__item { position: relative; } `Code language: CSS (css)

0 pseudo-element attached to every single grid item that is absolutely positioned.

Notice that there are no inset coordinates or dimensions for these elements. That’s because those instructions are specific to either the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

7 or

`.grid__item { position: relative; } `Code language: CSS (css)

0 element and need to be declared separately.

Step

5: Row Lines

The row lines are pretty straightforward. We’ll use the

`.grid__item { position: relative; } `Code language: CSS (css)

0 elements that we created earlier for this.

`.grid__item::after { inline-size: 100vw; block-size: var(--line-thickness); inset-inline-start: 0; inset-block-start: calc(var(--line-offset) * -1); } `Code language: CSS (css)

Width (

`.grid__item { position: relative; } `Code language: CSS (css)

4. of 100% would make the bottom line only the width of each grid item and would fail to account for the gap. It also causes issues when there are uneven items in the grid.

What we need is a width that is guaranteed to span the entire width of the grid container.

`.grid__item { position: relative; } `Code language: CSS (css)

5 will span the entire width of the grid parent in all situations since it is actually designed to span the entire width of the viewport.

The fact that

`.grid__item { position: relative; } `Code language: CSS (css)

5 causes these elements to overflow the container was solved earlier when we told the grid to hide all overflow.

Now that the width is taken care of, we need to set a height (

`.grid__item { position: relative; } `Code language: CSS (css)

7). This is done with the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

5 token, which has a value of 2px.

We’ll just set the left (

`.grid__item { position: relative; } `Code language: CSS (css)

9. position to 0 and the top (the inset-block-start) position to our

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

4. The only issue is that we need our offset to be a negative number to move it away from the grid item and into the gap space. That’s easy to do with a

`.grid { --gap: 2em; --line-offset: calc(var(--gap) / 2); --line-thickness: 2px; --line-color: red; } `Code language: CSS (css)

1 function. Just multiply any value by -1 and it makes the value negative.

Like magic, we have a “border” within every row of the grid.

Why isn’t there a border on top of the grid since these are positioned to the top of every item?

Good question! That’s solved by the overflow hidden we set earlier. There’s no need to exclude the first row of items in the grid. Since the pseudo-elements are offset, the elements across the top all appear outside of the grid, which is a hidden area.

Step

6: Column Lines

Now that rows are taken care of, let’s do columns. We’re going to use a very similar technique. The only difference is that we need to use the

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

7 elements since the

`.grid__item { position: relative; } `Code language: CSS (css)

0 elements have already been put to use.

`.grid__item::before { inline-size: var(--line-thickness); block-size: 100vh; inset-block-start: 0; inset-inline-start: calc(var(--line-offset) * -1); } `Code language: CSS (css)

Now, since these elements are tall and skinny, the

`.grid__item { position: relative; } `Code language: CSS (css)

4 (width) is equal to our line thickness and

`.grid__item { position: relative; } `Code language: CSS (css)

7 is equal to 100vh (viewport height instead of viewport width).

Next, we have to position these lines. Remember, we want to position them on the left side of the grid items to ensure that every grid item has a left “border” regardless of how many columns there are.

We can’t just set the left value (

`.grid__item { position: relative; } `Code language: CSS (css)

9. to 0, though. We need to position it perfectly in the center of the gap. This is where our

`.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } `Code language: CSS (css)

4 token comes in handy again. Dropping into a calc and multiplying it by -1 moves it right into the center of the gap for us.

Now add an

`.grid { --gap: 2em; --line-offset: calc(var(--gap) / 2); --line-thickness: 2px; --line-color: red; } `Code language: CSS (css)

8 (top) value of 0 to make sure it always starts at the top of the grid item.

Why isn’t there a border on the left of the grid since these are positioned to the left of every item?

Hopefully, you’re catching on by now. The overflow is set to hidden, which ensures these lines aren’t seen because they exist outside the grid container’s edge. All this crazy stuff that people try and do with :nth() selectors and media queries is entirely unnecessary when you hide the overflow junk.

That’s it! Simple, Efficient, Flexible, Elegant, & Maintainable

We’ve accomplished our goal!

Here’s the full code:

`.grid { // Locally scoped variables --gap: 2rem; --line-offset: calc(var(--gap) / 2); --line-thickness: 2px; --line-color: red; // Grid layout (Can be anything) display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; gap: var(--gap); } // Make Grid Items Control Absolute Pseudo Positioning .grid__item { position: relative; } // Pseudo Element Shared Styling .grid__item::before, .grid__item::after { content: ''; position: absolute; background-color: var(--line-color); z-index: 1; } // Row Borders .grid__item::after { inline-size: 100vw; block-size: var(--line-thickness); inset-inline-start: 0; inset-block-start: calc(var(--line-offset) -1); } // Column Borders .grid__item::before { inline-size: var(--line-thickness); block-size: 100vh; inset-inline-start: calc(var(--line-offset) -1); }`Code language: PHP (php)

And here’s a CodePen:

See the Pen Internal Grid "Borders" With CSS Grid by Kevin Geary (@geary-co) on CodePen.

I’ve seen many people attempt to achieve this design, and I’m pretty confident that the above approach is the most elegant and flexible. In fact, it’s almost so simple that it feels like cheating.

How do you make a translucent border in CSS?

The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.nullHow do I make a transparent border with CSS so that contents don't shift ...stackoverflow.com › questions › how-do-i-make-a-transparent-border-with...null

How to center align a border in CSS?

You can center your border in CSS by giving your element a width , padding , and setting the margin attribute to auto .nullCSS - How to Center a Border? - SheCodes Athenawww.shecodes.io › athena › 6244-css-how-to-center-a-bordernull

How do you hide the border behind text in CSS?

To specify no border using the border-width attribute in CSS, set it to zero: border-width: 0;. This eliminates the border around the specified element.nullHow to specify no border in CSS ? - GeeksforGeekswww.geeksforgeeks.org › how-to-specify-no-border-in-cssnull

What is border color transparent?

default border-color: transparent; Applies a transparent color to the borders. The borders will still take up the space defined by the border-width value.nullborder-color - CSS Referencecssreference.io › property › border-colornull