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 change the dimensions of a div depending of a number extern to that div? jquery/css

    how to set word break in table th or td, when column and table-layout auto using CSS

    How to show an image on html page using only css?

    How to edit itemprop in div class in CSS? (Wordpress)

    How to set background color with opacity by css?

    How to change CSS attribute at all div inside td with class

    How to create a frosted glass effect using CSS?

    How do I indent elements? Example in details

    how to make text with quotations justify? [closed]

    How to find class =“class1” included class=“class2” in CSS? [closed]

    How to conditionally apply CSS classes in Ember?

    How to make this div using html and css?

    How to remove style type css wordpress from header?

    How to set an image when we select its sub menu

    how to print 60 degree rotated watermark in HTML CSS

    How to replace default html checkbox with just html+css and no images?

    CSS: How to make a nav menu with a sub nav menu directly below it?

    How to make menu to slide right on click using HTML and CSS?

    How to know when you have received an image in the browser?

    How to style a GtkLabel with CSS?

    Div style in css, how to start under then button

    How To Prevent CSS Background Image From Moving When Shown?

    How can I do width = 100% - 100px in CSS?

    How to create a vertical clickable divider|line in bootstrap?

    Showing Div via CSS selector within a UL

    How do I resize an image in IE 8

    How to center text next to a responsive image in Bootstrap3

    How to notify view from model to change a value in backbone

    How-to mix fixed and percentage heights/width using css without javascript

    How to vertically align text to the middle of a list