remyremy remyremy - 8 months ago 27
CSS Question

How to make CSS border-image work

I am stuck with borders on my website. I want to put an image at the top of my vertical menu, one at the bottom and a background for the middle but that doesn't work.

This is my code:

.border-image {
border: solid transparent 10px; //I tried with and without this line
border-top-image: url(/pictures/menu_top.png) 10 round round;
border-bottom-image: url(/pictures/menu_bottom.png) 10 round round;
#menu_left {
background-image: url(/pictures/menu_middle.png);

I only have the middle image but not the top/bottom. Firefox gives me:

Property « border-bottom-image » unknow. Property « border-top-image » unknow.

Any idea what I'm doing wrong?

Edit: This works with FF, Chorme and Opera but not IE9.

border-color:transparent; border-width:45px 10px 48px 10px;
-moz-border-image:url("../pictures/left_menu_full.png") 45 9 48 9 stretch ;
-webkit-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat;
-o-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
-ms-border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;
border-image:url("../pictures/left_menu_full.png") 45 10 48 10 repeat ;


As in the article you mentioned, you still have to use the -moz prefix for firefox.

-webkit for Webkit browsers like Safari and Chrome -o for Opera and sometimes… -ms for Microsoft, although in this case border-image is just not supported in IE9 and below.