Give a CSS Styled Div a "Border-Left-Image"

Give a CSS styled div a border-left-image

border-image is now supported in all the major browsers (2014-05-22)

Demo with a single border-left-image

Demo with different left and right images.

The demos now need a minimum of Chrome 15, Safari 6, Firefox 15, IE 11 or Opera 15.

It is not actually possible to do this with separate image files, but you can slice a single image on the left and right. See the border-image page on MDN which shows some good examples or CSS Tricks for a comprehensive summary of how the other slicing options work.

Note: if you need earlier browser support please ask as a previous version of my answer did work with Chrome 12, Safari 5.0.3, Firefox 4 and Opera 10 but I have updated it now that new browsers support prefix-free CSS3.

Edit: Firefox now requires an additional property setting - border-style: solid (see CSS - New Firefox-release doesn't show Border-Image anymore)

border-image left only

Decided to just absolutely position it as a background image and repeat it on the y-axis instead. Might not be the best solution but it works.

Change div border image

While searching how to apply the background to all div I found another way to do it:

Creating a normal div and changing the clip-path.

#prueba {
    width: 200px;
    height: 200px;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
   background-color: red;
    position: absolute;
   top:200px;
   left:500px;
   background-color: red;
   background-image: url(img/borde.jpg);
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}

This is the result of it.

Result

Still can't figure it out how to do it by the other way

How to use border image along one side only?

Change border-width:2px to border-width:0 0 2px

In this way you are actually setting border bottom width 2px and other sides width equal to zero

Demo http://jsfiddle.net/naveenksh/eqpt5/3/

Border image style of div tag

The border-image property is not supported by IE, check: http://caniuse.com/border-image for browser support.

But, css3pie can make it possible for you to use a border-image in IE 6-9: http://css3pie.com/documentation/supported-css3-features/

CSS border-left is not working on safari how can I make?

I don't have a safari but this code maybe work

.card-txt {
  text-align: left;
  font-size: 0.85rem;
  margin-top: 40px;
  margin-left: 30px;
  border-style: solid;
  border-color: white;
  border-image-source: linear-gradient(to bottom, #c88cff, #9c5bd8);
  border-width:0 0 0 3px;
  padding-left: 10px;
  font-style: italic;
  height: 40px;
  width: 240px;
  margin-bottom: 50px;
  text-indent: 3px;
  border-image-slice:1;
}

<div class="card-top">
  <div class="card-image"><img src="clock.svg" alt="Clock" width="100" height="100"></div>
  <div class="card-txt">Lorem ipsum dolor sit amet.</div>
</div>

---

Related Topics