HTML Table Borders — A Complete Guide

Tables have long been an essential element in web development, serving as a powerful tool for organizing and presenting data in a structured and visually appealing way. Whether you're displaying tabular data, creating a simple pricing comparison or looking to best represent your research data, HTML tables play an important role in creating well-designed and user-friendly web experiences.

One of the fundamental aspects of working with HTML tables is the ability to control their borders. Table borders not only serve a functional purpose by visually separating the contents of a table, but they also contribute significantly to the overall aesthetic and design of a website. By carefully crafting the appearance of table borders, web developers can enhance the visual hierarchy, emphasize important information, and create a cohesive and polished look that aligns with the branding and design of the website.

In this comprehensive guide, we'll dive deep into HTML table borders, exploring the various properties and techniques that you can use to customize and optimize your table designs. From setting border colors and styles to manipulating cell borders and border widths, we'll cover everything you need to know to take your tables to the next level. Let’s get started!

Tip: If you want to experiment with different table borders, you can use our HTML Table Generator to create HTML Tables.

Border Colors

The first step in working with HTML table borders is understanding how to specify the color of your table borders. In HTML, you can set the border color using a variety of methods, including hexadecimal color codes, named colors, and even RGB or HSL values.

Hexadecimal color codes, such as #FF0000 for red or #00FFFF for cyan, offer precise control over the exact shade of your table borders. Named colors, on the other hand, provide a more intuitive way to set common colors, like blue, green, or gold.

When choosing border colors, it's important to consider the overall design of your website and ensure that the table borders seamlessly integrate with the rest of the page. A good rule of thumb is to use border colors that complement or contrast with the dominant colors used in your website's branding and layout.

If you explore our website, you’ll notice our tables use a soft, gray-ish color for their borders. This is to ensure that the tables remain visually appealing, accessible and don’t come off as brash.

Border Styles

In addition to color, HTML tables offer a wide range of border styles to choose from, each with its own unique visual effect and practical application. Let's explore the various border styles available:

Solid

The classic solid line border, often used for clear delineation and a professional appearance. This is by far the most common style used for borders.

CSS

/* Apply border to table and cells */
table {
  border: 1px solid black; /* Solid black border */
}
th, td {
  border: 1px solid black; /* Solid black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Dotted

A series of dots, creating a more playful or artistic look.

CSS

/* Apply border to table and cells */
table {
  border: 1px dotted black; /* Dotted black border */
}
th, td {
  border: 1px dotted black; /* Dotted black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Dashed

A repeating pattern of short line segments, useful for drawing attention to specific table elements.

CSS

/* Apply border to table and cells */
table {
  border: 1px dashed black; /* Dashed black border */
}
th, td {
  border: 1px dashed black; /* dashed black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Double

Two parallel solid lines with a space between them, conveying a sense of depth and weight.

CSS

/* Apply border to table and cells */
table {
  border: 1px double black; /* Double black border */
}
th, td {
  border: 1px double black; /* Double black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Groove

A three-dimensional effect, with the border appearing as a recessed groove.

CSS

/* Apply border to table and cells */
table {
  border: 1px groove black; /* Grooved black border */
}
th, td {
  border: 1px groove black; /* Grooved black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Note: The way this border looks will ultimately depend on its border color.

Ridge

The opposite of the groove style, creating a raised, three-dimensional border.

CSS

/* Apply border to table and cells */
table {
  border: 1px ridge black; /* Ridge black border */
}
th, td {
  border: 1px ridge black; /* Ridge black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Note: The way this border looks will ultimately depend on its border color.

Inset

A border that appears to be inset into the table, creating a subtle depth effect.

CSS

/* Apply border to table and cells */
table {
  border: 1px inset black; /* Inset black border */
}
th, td {
  border: 1px inset black; /* Inset black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Note: The way this border looks will ultimately depend on its border color.

Outset

A border that appears to be raised above the table, adding a subtle depth effect.

CSS

/* Apply border to table and cells */
table {
  border: 1px outset black; /* Outset black border */
}
th, td {
  border: 1px outset black; /* Outset black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Note: The way this border looks will ultimately depend on its border color.

Hidden

Just as you may have assumed, this property hides the table border but continues to take up it's occupied space.

CSS

/* Apply border to table and cells */
table {
  border: 1px hidden black; /* Hidden black border */
}
th, td {
  border: 1px hidden black; /* Hidden black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

No Border

There may be a number of situations where you don’t want to have a border around your table. Luckily, by default, HTML Tables don’t come with a border! 

However, you can also use another handle border property — none. Similar to the styles used in the previous section, this property will ensure that your table remains borderless.

CSS

/* Remove border from table and cells */
table {
  border: none; /* No border */
}
th, td {
  border: none; /* No border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Cell Borders

While setting borders for the entire table is a common practice, you may also need to apply borders to individual cells within the table. This can be particularly useful when you want to highlight specific data or create complex layout and design patterns.

To apply borders to individual table cells, you can use the border property directly on the <td> or <th> elements. This allows you to customize the color, style, and width of each cell's border independently, providing you with a high degree of control over the table's visual appearance.

CSS

/* Define a class for the cell with border */
.bordered-cell {
  border: 2px solid red; /* Example border style for the specific cell */
}

One common use case for cell-level borders is creating a "zebra-striped" effect, where alternating rows or columns have different border styles or colors. This can greatly improve the readability and scanability of your table data, making it easier for users to quickly identify and compare information.

CSS

/* Apply zebra striping to table rows */
tr:nth-child(even) {
  background-color: #f2f2f2; /* Background color for even rows */
}

Border Width

The width of your table borders is another crucial aspect to consider when designing visually appealing and functional tables. CSS allows you to specify the border width using various units, such as pixels (px), ems (em), or percentages (%).

CSS

/* Apply border to table and cells */
table {
  border: 3px solid black; /* Outset black border */
}
th, td {
  border: 3px solid black; /* Outset black border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

Choosing the appropriate border width can depend on several factors, including the overall design of your website, the amount of content in the table, and the size of the table itself. Thicker borders can be used to draw attention to important information or to create a more bold, assertive design, while thinner borders can help maintain a clean, minimalist aesthetic.

Note: border width can sometimes cause unintended behavior on smaller devices. The thicker the border, the less room you’ll have for the actual content. 

Border Collapse

The border-collapse property is a powerful way to control the behavior of table borders. This property can take two values: collapse and separate.

When you set border-collapse: collapse;, the borders of adjacent cells are merged, creating a single, unified border. This results in a more compact and streamlined table layout, as the borders between cells are basically eliminated. The collapse value is often the preferred choice for tables with a minimalist or modern design (like the tables on our website).

CSS

/* Apply border collapse to the table */
table {
  border-collapse: collapse; /* Collapse borders into a single border */
}

Conversely, border-collapse: separate; keeps the borders of individual cells distinct, creating a more traditional (outdated, in my opinion) table appearance with clear delineation between cells. 

CSS

/* Separate border for the table */
table {
  border-collapse: separate; /* Separate borders */
}

Note: While separation between table cells can be useful in certain situations, it’s generally not recommended. Prior to the explosion of mobile phone usage, tables never had to accommodate small screens. Now, we must take this into consideration, and separation between borders (as you may find) takes up a lot of real estate on mobile devices.

Understanding the implications of the border-collapse property and how it affects the overall table layout is crucial for creating well-designed and responsive tables that adapt seamlessly to different screen sizes.

Border Spacing

Closely related to the border-collapse property is the border-spacing property, which allows you to control the amount of space between the borders of adjacent table cells.

When border-collapse is set to separate, the border-spacing property comes into play, determining the distance between the borders of neighboring cells. 

CSS

/* Separate border for the table */
table {
  border-collapse: separate; /* Separate borders */
  border-spacing: 3px; /* Add space between borders */
}

Note: if you don’t have border-collapse set, border-spacing won’t work.

This can be particularly useful when you want to create a more distinct visual separation between table elements or when you need to accommodate additional content or styling within the table cells.

Note: as mentioned previously, be mindful of using this property. When these CSS properties were created, mobile devices didn’t need to be taken into consideration!

By adjusting the border-spacing value, you can fine-tune the overall appearance and layout of your tables.

Border Radius

The final aspect of HTML table borders we'll explore is the border-radius property, which allows you to create rounded corners on your table borders.

Traditionally, table borders have been defined by sharp, square corners (our entire website, for the nostalgia 😎), but by applying a border-radius value, you can soften the appearance and create a more modern, visually appealing design. This can be particularly effective when combined with other border properties, such as color and style, to achieve a cohesive and polished look.

Ironically enough, this property can be a tricky one.

The border-radius property can be applied to the entire table or to individual cells. However, you’ll likely run into some issues if applying the border-radius to the entire table when also applying borders to individual table cells. It won’t work — at least not as intended.

CSS

/* Try adding border radius */
table {
  border-collapse: collapse; /* Add border collapse to table  */
  border-radius: 8px; /* Attempt to add border radius */
}

In the above table, we actually have a border-radius of 8px applied, but it's not applying. Why is this happening?

Well, if you have border-collapse set to collapse while using borders for both the <table> element as well as its <td> and <th> elements, it will effectively collapse the <table> border.

However, if you set border-collapse to separate and set border-spacing to 0 (or any other value), you’ll see that you now have a border radius applied to your table. But, this still likely isn’t your intention.

CSS

/* Try adding border radius */
table {
  border-collapse: separate; /* Add border collapse with value of separate to table  */
  border-radius: 16px; /* Attempt to add border radius */
  border-spacing: 0px; /*  Remove spacing */
}

With the previous method, you’ll notice that we still have a problem. Not only are our table borders twice as thick, but the corner cells are bleeding over the <table> element, virtually hiding the applied border radius.

We could try bandage this by adding overflow: hidden; to the table, but that still won't fix the issue of the borders being twice as thick, not to mention the corners still look weird.

2 Ways To Add a Border Radius To a Table

In order the fix the above issues and make sure that our border radius is seamless, we can use 1 of 2 technique, depending on how you plan to use borders for the table.

Method A: You Don't Want a Border For Individual Table Cells

This is by far the easiest and most straightforward way of adding a border radius to a table. In order to do so, you simply need to add border-radius to the table element along with the border property with a value set for it's size, style and color.

Why does this work? Well, there are no other border-related issues to run into here, which leads to the second method.

Method B: You DO Want a Border For Individual Table Cells

This is where things get a bit more challenging. Unlike the previous method, we can't just set border-radius on the <table> element. This is due to a number of reasons, but the main one is because the borders for individual cells will conflict with the border of the entire table, giving you a result that you likely didn't desire.

In order to properly set the border radius, you can follow these steps:

1. Add border-collapse: separate; and border-spacing: 0; Collapse won't work!

For the first step, we need to set border-collapse: separate; and border-spacing: 0; to the <table> element. Collapse won't work here. Since we are using the cell borders, we need to ensure that they collapse together and have no space in between (unless of course you desire this effect for your table). We'll also add some padding to each cell here in order to make the example a bit more clear.

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
}

td, th {
  padding: 0.5rem;
}

2. Add a bottom and right border to each cell

This will set the foundation for the rest of the borders in the table.

CSS

/* Apply bottom and right borders to table cells */
th, td {
  border-bottom: 1px solid black; /* Bottom border */
  border-right: 1px solid black; /* Right border */
  padding: 0.5rem; /* Optional: Add padding for content */
}

3. Add a left border to the first cell in each row

In order to achieve a left border effect, we need to add a border to the first cell in each row.

CSS

table tr td:first-child, 
table tr th:first-child {
  border-left: 1px solid black;
}

4. Add a top border to each <th>

Similar to the above, in order to achieve a top border effect, we need to add a border to the top of each <th> element (or <td> if you aren't using header cells).

CSS

table tr th {
  border-top: 1px solid black;
}

5. Add border-top-left-radius to the first cell in the first row

Next, we need to add the border-top-left-radius CSS property to the first cell in the first row.

CSS

table tr:first-child th:first-child {
  border-top-left-radius: 0.5rem;
}

6. Add border-top-right-radius to the last cell in the first row

Similarly, we need to add the border-top-right-radius property to the last cell in that same row.

CSS

table tr:first-child th:last-child {
  border-top-right-radius: 0.5rem;
}

7. Add border-bottom-left-radius to the first cell in the last row

Heading to the bottom, we now need to add the border-bottom-left radius property to the first cell in the last row of the table.

CSS

table tr:last-child td:first-child {
  border-bottom-left-radius: 0.5rem;
}

8. Add border-bottom-right-radius to the last cell in the last row

For the last border radius, we need to add the border-bottom-right-radius to the last cell in that same row. Now, each of the corner cells should have the proper border radius applied!

CSS

table tr:last-child td:last-child {
  border-bottom-right-radius: 0.5rem;
}

With this, we now have a table with a smooth, seamless border radius applied. A great example of this in action can be found on this Astrology / Numerology website. Feel free to open up Google DevTools to take a closer look.

Conclusion

We've explored the vast array of options and techniques available for customizing HTML table borders. From setting border colors and styles to manipulating cell borders, border widths, border collapse as well as how to create seamless table borders, we've covered the key concepts and best practices to help you elevate the design and functionality of your tables.

By mastering these table border techniques, you'll be able to create visually striking and highly organized tables that not only enhance the user experience but also align seamlessly with the overall branding and design of your website. So, don't be afraid to experiment, play with different border styles and configurations, and find the perfect balance between form and function in your table-based layouts. Remember, the details matter!