The frame is not displayed around the element, but only in the corners, and in Chrome everything is displayed correctly. Here is the code:

#borderimage { -moz-border-image: url("border-image.png") 30 round round; -o-border-image: url("border-image.png") 30 round round; -webkit-border-image: url("border-image.png") 30 round round; border: 30px solid #40c4c8; border-image: url("border-image.png") 30 round round; border-width: thick; padding: 20px; }
  • @drumgog; To format a code, select it with the mouse and click on the button 101010 of the editor. - Nicolas Chabanovsky ♦

1 answer 1

 border: 30px solid #40c4c8;

Move this style to the beginning. Let me explain: the border-image chrome, apparently, understands the rest (where you looked) no. You have style

 border: 30px solid #40c4c8;

Rubs up the styles above:

 -moz-border-image: url("border-image.png") 30 round round; -o-border-image: url("border-image.png") 30 round round; -webkit-border-image: url("border-image.png") 30 round round;

and it turns out that only the next one works.

I.e:

 #borderimage { border: 30px solid #40c4c8; border-width: thick; -moz-border-image: url("border-image.png") 30 round round; -o-border-image: url("border-image.png") 30 round round; -webkit-border-image: url("border-image.png") 30 round round; border-image: url("border-image.png") 30 round round; padding: 20px; }