0

enter image description here
How we can achieve border like this image, using css?

  • 2
    Possible duplicate http://stackoverflow.com/questions/19299006/multi-colored-border-repeating-possible-with-css – NooBskie Aug 31 '16 at 03:33

2 Answers2

1

You can set the border color to transparent

border:10px solid transparent;

Then you can use border-image property to use an image as border. For example:

border-image: url(boder-img.png) 30 round;
-webkit-border-image: url(boder-img.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(boder-img.png) 30 round; /* Opera 11-12.1 */

According to W3Schools the syntax for border-image is:

border-image: source slice width outset repeat|initial|inherit;

Learn more about border image here: http://www.w3schools.com/cssref/css3_pr_border-image.asp

p.img-border{
 border: 10px solid transparent;
    padding: 15px;
    -webkit-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Safari 3.1-5 */
    -o-border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round; /* Opera 11-12.1 */
    border-image: url(https://www.welovesolo.com/wp-content/uploads/vecteezy/01/1fbahmfyivo.jpg) 30 round;
}
<p class="img-border"> Sample paragraph. </p>
dwrdlnz
  • 134
  • 5
0

That is an actual design. It could be accomplished with html5 JS but I do not think that is a CSS border.

Nick Delben
  • 95
  • 3
  • 14