Treehouse: Grow your CSS skills. Land your dream job.

CSS border-image help….

  • # April 22, 2012 at 2:30 pm

    Trying to get CSS image border going on a a site i’m working on. It’s working in Safari, but not Chrome or Firefox. The odd thing is that it was working great in Chrome until about two weeks ago, then one afternoon I fired up my test site to do some work and my image border was gone.

    Even stranger, but perhaps not relevant, is that I set the border background color to black as a fallback incase my border image didn’t load for whatever reason, but not only was chrome no longer loading my border image, it was suddenly showing the border in white, instead of my black fall back. As of today chrome is showing the black fall back border color.

    It’s all very strange.

    I made absolutely no changes at all to my border CSS prior, it just stopped working all of a sudden in chrome, so I’m guessing that a chrome update borked it. It’s loading one instance of the border image in the bottom left and right corners but no repeat.

    The image is set up as a 30 x 30 seamless/tiling image.

    Building local at this point so no links, but I’ll attach my code below and a couple of screen shots. Not expecting to hear much back as it’s a Sunday, but any help at all to get this thing going would be huge.

    Thanks in advance.

    Screenshots here –


    #container {
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    width: 960px;
    background-color: black;
    border-style: solid;
    border-color: black;
    border-left-width: 30px;
    border-right-width: 30px;
    border-bottom-width: 30px;
    border-image: url('images/cabinet_30.jpg') repeat;
    -moz-border-image: url('images/cabinet_30.jpg') repeat;
    -webkit-border-image: url('images/cabinet_30.jpg') repeat;
    -o-border-image: url('images/cabinet_30.jpg') repeat;
    box-shadow: 0px 5px 15px black;
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.