CODEWITHSUNDEEP
cssimageborder
Justin V
Justin V

Reputation: 37

CSS border image on bottom only

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>

Upvotes: 2

Views: 1239

Answers (1)

Rob Erskine
Rob Erskine

Reputation: 927

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.

Upvotes: 2

Related Questions