Question 174434 in CSS Question posted in
Some basic documentation can be found here.

How can I show more of my border image on the bottom with css border-image?

I’m using css-border-image to put TV show posters into an image of a horizontal TV that has a stand at the bottom, so the image isn’t supposed to be centered in the border-image – I want to get it to go a little higher up, or stretch the border-image vertically so the image fits in the right place.

.tv {
  height: 170px;
  border: 9px solid transparent;
  border-image: url("https://i.stack.imgur.com/xyxRN.png") 15 stretch;
}
<img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">

Things I’ve tried:

  • Adding a border-bottom: 20px line (this only stretches out the TV stand)
  • Using round and stretch with different numbers
  • Using border-image-outset
  • Trying border-image-slice

Can I make the image not be centered in its border-image? Please tell me there’s a solution that only edits the css in .tv without having to put it in a container!

Tags:

2

Answers


  1. 0

    Some padding with background-image would be easier

    .tv {
  height: 170px;
  padding: 6px 8px 20px;
  background: url("https://i.stack.imgur.com/xyxRN.png") 0/100% 100%;
}
    <img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">
    Login or Signup to reply.
  2. 0

    You can try to find some fitting values for border-image-slice: https://developer.mozilla.org/en-US/docs/Web/CSS/border-image-slice

    .tv {
  height: 170px;
  border: 9px solid transparent;
  border-image: url("https://i.stack.imgur.com/xyxRN.png") stretch;
  border-image-slice: 10 10 62;
}
    <img class="tv" src="https://m.media-amazon.com/images/M/MV5BOWFjODRhMDktMTE3My00ODQzLThmODctYmM2ZmU5YmY0ZGVkXkEyXkFqcGdeQXVyMjkwOTAyMDU@._V1_.jpg">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search