2

The CSS3 border-image seems to work by slicing and dividing an image.

Suppose I have a 20px square png of a star that I want to repeat along a top border only. How would I compose the CSS rule?

i.e. no slicing, no stretching, no round... just repeat a little square png along the top border only.

.div-with-top-border {
  border-image: url('/images/star.png') ? ? repeat?;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
}

2 Answers 2

1

Repeat: repeat, or tile, the image.

Round: tile the image but only so that a whole number of tiles fit.

Below code will create a top transparent border of 20px and set the star.png image as background. The number in border-image much like the border-width property, and they are specified in the same order: top, right, bottom, left. You can use percentages or pixels. Strangely, the percentages require the "%", while pixels should be listed without the "px":

.div-with-top-border {
   border-top: 20px solid transparent;
   border-image: url('/images/star.png') 20 0 0 0 round;
}
1
  • 1
    Please add some description to your answer for more human readability.
    – AmerllicA
    Nov 23, 2018 at 14:04
-2
.div-with-top-border { 
   display: block; 
   border-top: 20px solid transparent; 
   background-repeat: repeat-y; 
   border-image: url('/images/star.png'); 
   border-bottom: 0; 
   border-left: 0; 
   border-right: 0; 
}
1
  • 6
    Welcome to Stack Overflow. While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.How to Answer
    – Elletlar
    Nov 23, 2018 at 8:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.