CSS border image on bottom only

Question

I have an issue with the CSS border-image property. I'd like my image to fill the border-bottom of my html element only. I have seen support online for this topic, but nothing worked for me. I would also like a solid border for the left, right, and top side. I cannot force my border-image to the bottom of the element. The border around the element should have normal, solid sides and top with the bottom (inconsistent) side of the border, below the element. I have linked my codepen image-border codepen Thank you!

<div class="circle_container"><!--BEGIN CIRCLE CONTAINER-->
      <h1 id="pride">PRIDE</h1>
      <h2 id="line2">IN ONE'S WORK</h2>
          <br />

            <ul id="line3">
              <li>IS THE CAT'S MEOW</li>
              <li>IS THE CAT'S STRIPES</li>
              <li>IS THE CAT'S ROAR</li>
              <li>IS THE CAT'S FURBALL</li>
            </ul>
    </div>

Rob Erskine · Accepted Answer · 2015-07-18 23:39:57Z

2

Instead of doing border-image bottom, you can use psuedo content, and position it exactly the way you want.

.circle_container:after{
     content:" ";
     display:block;
     width:100%;
     height: 20px;
     background-image:url('/your/image.png');
     position:absolute;
     bottom:-10px;
     left:0px;
}

You can also then add border-left, border-right, and border-top as you see fit.

answered Jul 18, 2015 at 23:39

Rob Erskine

9272 gold badges11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS border image on bottom only

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related