Forums

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

Home Forums CSS Border RGBA Opacity with a white background

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #34012
    dtrick
    Member

    Hi everyone,
    I’m attempting to make a content box with a semi-transparent border. The background for the box is white, which seems to be giving me trouble. Here is the code I’m working with, which seems to work perfectly fine when the background for such a box is not white.

    .info {
    padding: 15px;
    width: 562px;
    background: #fefefe;
    border: 3px solid rgba(0,0,0,0.3);
    margin: 15px 0; }

    Am I missing something? Am I crazy? Any suggestions to make this work with a white bg?

    Thanks!

    #85412
    TheDoc
    Moderator

    Adding the background-clip seems to help:

    http://jsfiddle.net/c4jZG/

    #85435

    @dtrick By default the background of an element also sits behind the border. @TheDoc has wisely suggested using the background-clip property to contain the background to the element and its padding only.

    #85437
    dtrick
    Member

    Perfect! Thanks a lot. I came to realize the default border overlapped with the background and never realized the background-clip property existed.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.