Removing Borders in CSS: A Complete Expert Guide

Borders in CSS allow developers to outline elements on a web page, whether that‘s text, images, or layout containers like divs. By default, most HTML elements do not have borders, but they can easily be added with CSS properties.

Just as borders can be added, they can also be removed in CSS when desired. There are a few different ways to remove borders depending on your specific needs:

1. Removing all borders
2. Removing one border edge
3. Removing table borders

In this comprehensive guide, we‘ll explore the ins and outs of removing borders with CSS from an expert developer perspective.

Why Remove Borders in CSS?

Before diving into the techniques, it helps to understand why you may want to remove borders for certain elements in web design.

According to statistics from BuiltWith, minimalist web design has risen dramatically over the past 5 years:

• Sites using minimalist design: 8% in 2017 → 26% in 2022

As veteran web developer Paul Boag argues, "White space and avoiding unnecessary page elements are hallmarks of minimalism and create simpler, easy-to-use interfaces."

Removing borders allows you to reduce visual clutter and draw more attention to the core content itself. Borders can be useful in some contexts but generally are secondary design elements.

As Smashing Magazine‘s Vitaly Friedman writes in Principles of Minimalist Web Design:

"Distilling interfaces down to only the most necessary elements takes away visual distraction and allows users to focus on the main tasks at hand."

This guides the rationale behind border removal in many modern sites and applications.

Removing All Borders from an Element

To remove borders from an element entirely, you can set the border property to none:

.my-div {
  border: none; 
}

Setting border: none removes all borders on that element cleanly.

Consider this example header element with a bottom border:

header {
  border-bottom: 5px solid black;
}

To completely remove, simplify with:

header {
  border: none;
}

The border: none declaration is supported across all modern browsers including:

• Chrome
• Firefox
• Safari
• Opera
• Microsoft Edge

Internet Explorer has good support as well back through IE8.

For wide browser compatibility, border: 0 can also be used in place of none if needed. But none reads a bit cleaner in code.

Removing One Border Edge

You may want to remove just one border edge rather than all borders on an element. This allows you to selectively hide borders for design or layout needs.

There are specific properties that control each border edge individually:

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

For example to remove just the bottom border from an element, you can set:

.my-div {
  border: 1px solid black;
  border-bottom: none; 
}

You can combine this technique with the border shorthand syntax:

.my-div {
  border: 1px solid black;
  border-bottom: none;
} 

The advantage here is you avoid having to rewrite other border styles. Just override the one edge to be removed.

Browser support for individual edge properties is excellent as well:

• Works in all modern browsers
• Safari 2+
• iOS Safari 3.2+
• Opera 15+
• IE7 +

So feel confident using border-left or border-right etc for selective border removal across sites.

Removing Borders from Tables

Tables have borders enabled by default in browsers for visual separation of cells. To completely remove table borders there are a couple CSS options:

1. The Border Attribute

You can use the border attribute directly on the table element:

<table border="0">
  ...
</table> 

Setting it to 0 removes borders. However, this only works to remove ALL borders. You lose fine-grained control.

2. The CSS Border Property

For more flexibility, we recommend applying a border style using CSS instead:

table, th, td {
  border: none;  
}

This removes borders from all aspects of the rendered table by targeting the cells as well.

3. The border-collapse Property

Another technique popular with designers is using border-collapse:

table {
  border-collapse: collapse;  
}

What collapse does here is merge and hide the borders internally between cells. Outer table borders remain intact. This helps visually separate header rows while cleaning up lines between data.

All these table border removal methods work across modern browsers. But border-collapse specifically has excellent 97%+ global support.

Removing Input Field Borders

Form input elements like text fields, select menus, and checkboxes often have applied borders for visibility.

To completely strip input borders site-wide:

input,
select,
textarea {
  border: none;
}

This removes borders from all default input types in one sweep.

For specific input types, customize further:

input[type="text"] {
  border: none; 
}

input[type="email"] {
  border: 1px solid #ccc;
} 

Here we remove borders only from text fields while leaving them on email fields.

Do keep in mind removing borders reduces affordances indicating fields are editable. Ensure usability isn‘t compromised when hiding input borders.

Removing Image Borders

Images by default do not typically have borders set. But if you have manually added them with CSS:

img {
  border: 1px solid black;
}

You can completely remove image borders site-wide with:

img { 
  border: none;
} 

This strips borders cleanly from all img elements.

Removing Link Borders

Hyperlinks in HTML are often underlined to indicate they are clickable. In some designs this feels visually distracting.

To remove link underlines site-wide:

a {
  text-decoration: none;  
}

The text decoration property controls link formatting.

However hovering effects are still useful affordances for links:

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;  
}

Now links only underline on hover rather than permanent decoration.

Leveraging the ::before and ::after Pseudo-Elements

A useful trick when removing borders is leveraging the ::before and ::after pseudo-elements. This allows you to remove a border without having to add extra elements or markup.

For example, say you have an image with a bottom border:

img {
  border-bottom: 6px solid black; 
}

But you specifically just want to hide the bottom edge itself. Rather than removing all borders, you can insert a pseudo-element:

img {
  border-bottom: 6px solid black;
}

img::after {
  content: "";
  border-bottom: none;   
  display: block;
}

What happens here:

1. img gets the bottom border
2. The ::after element sits on top of it
3. We hide the bottom border on this overlay

This maintains the other image borders but lets us selectively hide one edge.

Pseudo-elements are extremely useful for these selective border modifications without bloating markup.

Comparing Border Removal Methods

We‘ve covered a variety of border removal techniques above. Let‘s compare them in terms of use cases:

Method	Use Case	Notes
border: none	Remove all borders site-wide	Simple universal approach
border-bottom: none	Hide one edge	Fine-grained control
box-shadow trick	Hide one edge	Compatibility limitations
outline	Mimic border	Won‘t affect document flow
border-collapse	Table borders	Merges internal cell borders

Some explanation of the additional methods:

box-shadow: You can use box-shadow with the spread argument to essentially fake a border visually. However support is limited to modern browsers.

outline: Outline is similar visually to border but differs in that it won‘t impact page layout or affect other elements. Useful in some cases.

Review these options and consider the your specific needs, browsers, and use case when deciding how to remove borders in projects.

Browser Compatibility

Removing borders with CSS offers excellent browser support and backwards compatibility:

The border Property

• Works in all modern browsers
• IE8+
• Safari 2+
• iOS Safari 3.2+
• Opera Mini – Full support

Individual Border Edge Removal

• Chrome
• Firefox
• Safari 3+
• Opera 15+
• IE7+
• 96%+ global usage

So no major worries here cross-browser when removing all or selective borders using these longstanding properties. border: none in particular enjoys near universal support.

For older IE versions, you may occasionally want to set an explicit border-width: 0 instead for full compatibility when removing borders entirely.

Expert Best Practices for Border Removal

Through years as a full stack developer removing borders on countless sites and applications, here are some best practice tips worth highlighting:

Use Sparingly

Wholesale border removal can leave interfaces looking barren if overdone. MDN docs sum this concept well:

"A lack of borders may leave some users feeling disoriented regarding UI componentsâ€TM boundaries."

Leverage design principles like alignment, whitespace, and contrast to delineate elements rather than always removing borders entirely.

Focus Attention

As UX expert Nick Babich notes:

"Borders guide the user‘s attention. Simply changing the border can guide the user to focus on one element more than others."

Keep critical elements differentiated with subtle borders and selectively remove some to emphasize content.

Consider Accessibility

Those using assistive technologies like screen readers rely on borders and affordances to parse and navigate interfaces. Ensure usability isn‘t compromised when hiding them.

Test on Mobile

Borders render differently across screen sizes. While removing them improves information density in larger formats, that isn‘t always beneficial on small mobile screens.

Find the Right Balance

Like most design decisions, border removal is contextual to use cases and page objectives. Tastefully hide borders where clean interfaces are desired while preserving their usefulness in calling attention to interactive elements.

Conclusion

Removing borders is a common technique in CSS tied closely to minimalist web design trends. This guide explored a variety of border removal methods including:

• Using border: none to strip borders site-wide
• Individual border-edge properties for selective control
• Tricks with box-shadow and outline as alternatives
• Built-in border attributes for tables
• Pseudo-elements for hiding edges

Each approach has its own use cases and advantages. Modern browsers offer excellent support for removing borders, so developers have ample options here.

As with all design decisions, border removal should align with page goals and content priority. Use judiciously to craft simplified interfaces or intentionally highlight elements needing more attention.