Why Does a Transparent Border Break My Gradient Background, and How Can I Fix It?

Border Overflows Gradient Background

When adding a transparent border to an element with a linear-gradient background, unexpected effects can arise. The left and right sides may exhibit incorrect colors and a flat appearance.

Cause

The gradient extends to the edges of the padding-box, while the border is drawn outside this area. This disparity creates an undesirable visually.

Solution

To rectify this issue, consider using box-shadow:inset instead of border. box-shadow:inset is rendered within the padding-box, mimicking the effect of a border without affecting the background's appearance.

Revised CSS:

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

Note: Since box-shadow doesn't occupy space, adjust the padding accordingly.

Illustration:

[Image of padding-box and border-box illustration here]

Demo:

http://jsfiddle.net/ilpo/fzndodgx/5/

The above is the detailed content of Why Does a Transparent Border Break My Gradient Background, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!