How to make CSS border-image work


Tags: css,css3,cross-browser,border-image

Problem :

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);
background-repeat:repeat-y;
}

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 ;


Solution :

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.


    CSS Howto..

    How to I change this css psuedo button in Javascript/Jquery

    How can I create a color with values for green, blue, orange, and gold only?

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How to make text svg-animation launch when visible?

    How to: mob-responsive menu that will always have a height:100% and show all
  • s although the body gets position:fixed when the list is displayed
  • How do I use CSS to centre this content?

    how to recreate tex's over- underbracket using css

    How to insert line breaks in HTML documents using CSS

    CSS How to fix element position after some scroll without using jquery

    how to make a double hover effect with css

    Wordpress- How do i change the default font of navigation menu?

    how to use css to display multiple posts in inline-block like google+

    How to vertically center multiline text with an image on its left?

    How do I change my link's image on click?

    How to make this div using html and css?

    How to trigger the :active pseudoclass on keyboard 'enter' press? (using only CSS)

    How to use active and before with CSS?

    How to set the minimum height of a
    box in Internet Explorer 8?

    How to adjust the length of input

    How can I target a element inside h2

    How to align a picture,name and the post with css like facebook does?

    How to update a div with another image in angular?

    How to apply css mark on videogular time line at specific time

    CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

    How to always make page content appear beneath navigation bar?

    How do I change the font colour of text nested within a placeholder of an input search [duplicate]

    How to make .less files to have .css syntax highlight in Vim?

    how to apply the css style only to child

    How can i Convert left vertical menu to right?

    How to use sprite css [duplicate]