Why Do Transparent Borders Distort Gradient Backgrounds in CSS?

Transparent Border Distortion with Gradient Backgrounds

In CSS, applying a transparent border to an element with a linear-gradient background can cause an unusual effect where the left and right edges of the element exhibit distorted or flattened coloration.

This occurs because the gradient's start and end points reside at the edges of the padding-box, while the border is rendered outside it. Consequently, the border appears visually distorted as the background is repeated on either side of the padding-box to fill the border-box.

Cause of the Distortion

The reason for this distortion lies in the way the browser interprets the CSS box model. The padding-box determines the area within which the element's content is placed, while the border-box encompasses the padding-box and the border. In the given scenario, the gradient background is contained within the padding-box, but the transparent border extends beyond its boundaries.

Solution

To resolve this issue, one can use a CSS property known as "box-shadow: inset." Unlike a border, an inset box shadow is rendered within the padding-box, providing a visually similar effect to a border without causing the distortion.

By replacing the border with the following box-shadow property, the desired appearance can be achieved:

box-shadow: inset 0 0 0 10px rgba(0,0,0,0.2);

Furthermore, since a box shadow does not occupy space like a border, it is necessary to increase the padding accordingly.

Illustration

The following diagram illustrates the difference between the padding-box and border-box:

[Image of padding-box and border-box]

Demonstration

An interactive demonstration of the solution can be found at: http://jsfiddle.net/ilpo/fzndodgx/5/

The above is the detailed content of Why Do Transparent Borders Distort Gradient Backgrounds in CSS?. For more information, please follow other related articles on the PHP Chinese website!