Is the border collapsing model implemented in CSS web browsers valid?

In this article, we’ll introduce the border collapsing model in CSS and the question of whether it works in web browsers.

Read more: CSS Tutorial

What is the border collapsing model?

The border collapsing model is a mechanism in CSS for handling overlapping borders between adjacent elements. When two adjacent elements have the same border style, color, and width, the border collapsing model combines the two borders into a single border, preventing them from overlapping.

The border collapsing model applies to vertically adjacent block-level elements, including block-level container elements and inline-block elements. In the border collapsing model, only the borders of adjacent elements are collapsed, while the borders of non-adjacent elements remain independent.

Web Browser Implementation of the Border Collapsing Model

The border collapsing model is clearly defined in the latest CSS specification, but web browsers implement it inconsistently. Different browsers may handle border collapsing differently, resulting in inconsistent display.

For example, in some browsers, when the borders of two adjacent elements collapse, the actual width of the merged border may exceed the sum of the widths of the two original borders. In other browsers, the width of the merged border is strictly equal to the sum of the widths of the original borders.

Furthermore, the details of how border collapsing is handled may vary between browsers. For example, some browsers may automatically adjust the layout of adjacent elements when borders collapse, while others may leave them unchanged.

Example Description

To better understand how the border collapsing model works in different browsers, let’s look at an example.

First, we create two vertically adjacent block-level elements in HTML and set the same border style, color, and width for them:

<div class="box"></div> 
<div class="box"></div> 

Next, we use CSS to set the same border style for both elements:

.box {
border: 2px solid black;
} 

When running this code in different browsers, we’ll find that border collapsing may work differently. Some browsers will collapse the two borders into a single 4px-wide border, while others may keep them separate and display two 2px-wide borders.

This difference can significantly impact the layout and visual quality of a web page. During development, we need to account for these differences in browser implementations of the border collapsing model and make adjustments and compatibility adjustments accordingly.

Summary

The border collapsing model is a mechanism in CSS that handles overlapping borders of adjacent elements. However, web browsers implement this model inconsistently, resulting in display differences between browsers. When using the border-collapse model, developers need to be aware of these implementation differences and make appropriate adjustments and compatibility changes to ensure consistent display across browsers.