Single line border-image

Question

I have a PNG which is 10px x 1px and I need to use it for a border-image but for some reason the image doesn't repeat. It appears in the corners but not all the way? What am I doing wrong?

#border {
  width: 200px;
  height: 100px;
  border: 1px dashed transparent;
  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 100% repeat;
  background: yellow;
  text-align: center;
  line-height: 100px;
}

<div id="border">
  bordered area
</div>

can you use an absolute path so we can see the image with you — Temani Afif, May 16 '18 at 09:20
Without further info of the desired result, you can simply use border/outline: ?px dashed #?; — VXp, May 16 '18 at 09:35

score 2 · Answer 1 · answered May 16 '18 at 09:26

2

Wrong start, it's 0 not 100

  border-image: url(https://image.ibb.co/byABRJ/border.png) 1 0% repeat;

answered May 16 '18 at 09:26

Syneria Fana

153
12

Jonas Grumann · Answer 2 · 2018-05-16T09:30:26.303

1

The parameter you set to 100% is border-image-width, I think you want it to be 1 (or you can omit it, I think it's 1 by default).

 <!DOCTYPE html>
 <html lang="en">
  <head>
   <style>
    #border {
     width:200px;
     height:100px;
     border:1px dashed transparent;
     border-image: url(https://image.ibb.co/byABRJ/border.png) 1 1 repeat;
     background:yellow;
     text-align:center;
     line-height:100px;
    }
   </style>
  </head>
  <body>
   <div id="border">
    bordered area
   </div>
  </body>
 </html>

Source: https://www.w3schools.com/cssref/css3_pr_border-image.asp

EDIT: If you want your border-image to be the same on the left/right edges you'll have to add those to the source image you're using. Take a look at this https://css-tricks.com/almanac/properties/b/border-image/

edited May 16 '18 at 09:30

answered May 16 '18 at 09:27

Jonas Grumann

10,438
2
22
40

Can it also do the edges or do I need different code for that? – Ukuser32 May 16 '18 at 09:28
Edited my answer to include a link for that – Jonas Grumann May 16 '18 at 09:30
An easy step by step guide can be found here https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes – Jonas Grumann May 16 '18 at 09:32
If you want to go down the easy road (with less control), just use `border: 1px dashed #666;` – Jonas Grumann May 16 '18 at 09:33

score 0 · Answer 3 · answered May 16 '18 at 10:03

You can also use this way.

#border {
   width:200px;
   justify-content: center;
   align-items: center;
   display: flex;
   height:100px;
   border-top:1px dashed blue;
   border-bottom:1px dashed blue;
   background:yellow;
}

    <!DOCTYPE html>
     <html lang="en">
      <head>
       <title>Test</title>
      </head>
      <body>
       <div id="border">
        bordered area
       </div>
      </body>
     </html>

score 0 · Answer 4 · answered May 16 '18 at 10:36

In the end building an image which CSS then used for the border proved too time consuming. Instead I found:

How to increase space between dotted border dots

And have posted an answer with my solution there. Although not a direct-fix to the presented question it solves it and without images which for me was easier.

Single line border-image

4 Answers4