CSS border image only working on top and bottom

Question

I am trying to add an image for my border, but right now it only appears to be working for the top and bottom. I need it to go around the entire container.

Here is the border image:

Here is what my container currently looks like:

Relevant HTML:

<div class="panel-blurb">
            <p class="panel-blurb-text">    
                Ad molestiae hendrerit mei,
                nobis persius deleniti et eum, ea ullum electram dignissim 
                his. Dicit dolorem moderatius in pro, dicat choro propriae ad mei.
                Dicat legimus efficiendi sit in. Natum falli cu nec. Id hinc regione 
                alienum vel, cu vide atomorum mel. Munere commodo at eos, te laudem docendi 
                volumus pro, maiorum dignissim ex sea.
            </p>
            <div class="panel-link-wrapper">
                <a class="panel-link" href="#">VIEW DETAILS</a>
            </div>
        </div>

Relevant CSS:

.panel-blurb{
    width: 88.5%;
    background-color: #54504f;
    padding: 25px;
    border-width: 15px;
    border-style: solid;
    border-image: url(images/border-min.png) 30;
}

Answer 1

I have done some work of my own and i think what you have done is only save the image for one side of a border if you duplicate it and make a box like a border it should work. I had the same issue you have to take into consideration each side of the border. When i did this it solved the issue just make a new image add the top and bottom flip that image crop it so it fits and you are golden i set mine to 11 11 11 11 round.

I'm not sure if it will work for you but it worked for me.

Answer 2

Try this .It will give border around all sides

border-image:url('images/border-min.png') 30 30 round;

Answer 3

Without border-image

div {
  width: 300px;
  height: 300px;
  background-color: #545050;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='), url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABf0lEQVQ4T12SB3LDMAwE+USLYgFYZOv/n8iCkBUlMxgV4A71wjnbkCwp1j22mo8un6G9pFbS1Mr30SrfmvfB72xYOI/OazbpNQOdUs5hAYx0ny5wZqtvcuE5OmYcp+GdWkbNln6FKfIGjQ29CVjwBizloh1arWAtQwoVLL1FuwFGA4wF2SOgq7QFFK9mmweOp7OaXckiacdCer3ytl0Ib2A0q9C8gk9lBJa0wC/jYCUuWhfPeps33EuucQPt4IuD4WVvLOrJYXpykfGGYQ/OvrE06+fBsfG+Xd12cWqKEJjhX2/80hshaH96swqSrSuf2G4vLojLA00WjR3A4YvqbOYb1kMLSmEM9/sy4VONw4APlD4f+abkhrTEbkpulPG7zMkNTEq/2iEGiNX5oXzLpiZoj+OiiaVR6kppNSEIlxIrNo3xtMpl+Ys3iQViuNgbjSIZOOAYppU8xBRNcV2S6WISe3cNaieLiT1uLDA2lJYTasLqvks2NDfll6fpMKcfxz4t98bmcAYAAAAASUVORK5CYII='),
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC'
),
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAARCAIAAAC0D9CtAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTCtCgrAAAABeklEQVQ4T12TDbLDIAiEPWLjP6hJev9LvA9N89LO0BlFll021EmOR5f33oij1RJ8fL1+ogY/pKya91CXvW8lnQvWZdRcwvYEpG27C86hvSYXt1eJvtfMnR5nE7JkFiD7TRHSqj0NHVpr9BMTvJa4z4cJq70k2MoE7FqoJkBCSLHjJylyoT3VC3aowRqAVhc/gCGZjJbkNEXmI7gPg8nF1uVqwRhddil0YVq6GIYeltWiKeySLz/u6GodAWBdt14OW2xKuponWYBpfWLoNcWbSQRyFibdGBsaSQ8Ms5HkiTM1nPEg9FpgRCE2oPhH25Jt7pHHbimupjC0LFuIpweL/Dq3egCbk7sa4bH2XcyTVWQtpk4O/y0mG8HubBIDtnCxZ8Rc39Tz1PJ0H5GjQYsimwcPoDJVa6P63J3PprIKtlZTMBKgxVjjaXzKKYBYDGm7F9Q2y2B9SqAAD/DeRE+L+DKsffps9B1TyPVfALb24FLMSEbyDYDqCzP0D2XlLfeYeYFOAAAAAElFTkSuQmCC'
);
  background-position: top center, bottom center, center left, center right;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

<div></div>

Answer 4

You forget add round

You can do it like this

.panel-blurb{
    width: 88.5%;
    background-color: #54504f;
    padding: 25px;
    border-width: 15px;
    border-style: solid;
    border-image: url(images/border-min.png) 30 round;
}