The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS3 Gradients and Transparent borders

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #32841

    As I’ve recently discovered, CSS3 gradients and transparent borders are not best buddies.

    I don’t know why, but when I’ve had elements with transparent borders (don’t ask me why I had them in the first place) and gradients, I’d often end up with a thin line somewhere on the edge of the box, usually left edge or the right edge.

    So, if you plan to use gradient backgrounds and you have transparent borders, ditch the borders and give the element extra padding instead. There’s no reason for transparent borders anyway but it’s worth pointing out!

    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;

    That should solve the issue with the transparent borders.


    I overcame a similar issue using background size & position.

    Using a transparent border on a box, then applying a linear gradient gave me weird results. A thin dark line behind the transparent top border and a corresponding light line behind the bottom border.

    Your solution doesn’t tackle the exact issue I was encountering, but it inspired me to look for a similar one. I found that increasing the background size by a number > 100% of the box then using background position to negatively offset it vertically solved the issue. The gradient is rendered based on the dimensions inside the border, so these extra 2 pixels simply needed to be accounted for.

    Here’s an example:

    background-size: 100% 112.5%;
    background-position: 0 -0.063em;
    border: 0.063em solid rgba(0, 0, 0, 0.2);
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.