CSS 'border-collapse' Property Explained

The CSS 'border-collapse' property specifies whether table borders should collapse into a single border or be separated as in standard HTML. This property is essential for controlling the appearance of tables on web pages, allowing for cleaner, more integrated designs or ensuring that each cell's borders are distinctly defined.

CSS 'border-collapse' Property Examples

See the Pen CSS 'border-collapse' Property by Webzstore (@webzstore) on CodePen.

The 'border-collapse' property offers a simple yet powerful way to influence the layout and appearance of tables in CSS, enhancing both the functionality and aesthetic appeal of data presentation on web pages.

Browser Support For 'border-collapse' Property

1.0	1.2	1.0	5.0	4.0

CSS Syntax of the 'border-collapse' Property

border-collapse: collapse | separate | initial | inherit;

Usage of the 'border-collapse' Property

Use 'border-collapse' when you need to define the border behavior of tables. It's particularly useful for styling tables in a way that matches the overall design of a site or application. By collapsing borders, you can create a more seamless look, whereas separated borders can help define each cell more clearly for better readability.

Property Values of the 'border-collapse' Property

• Collapse: Causes table borders to collapse into a single border, eliminating in-between spaces.
• Separate: Keep table borders separate, with each cell displaying its own borders.
• Initial: Resets the 'border-collapse' to its default value (separate for most browsers).
• Inherit: Inherits the 'border-collapse' property from the table's parent element.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at his company, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website