Can you assign an image to border-right?

Question

I am making a navigational menu in html and css, but i want the border right of each navigational item to be an image.

I tried

border-right:url(image.jpg);

But this didn't work.

How do I do it?

Answer 1

You can set custom border size. Top, left and bottom will be 0px and set a border-image. If you want to decorate these borders with other style then use sub div.

Right image decoreted div style is:

border-style: solid;
border-width: 0px 15px 0px 0px;
-moz-border-image: url(border.png) 27 repeat;
-webkit-border-image: url(border.png) 27 repeat;
-o-border-image: url(border.png) 27 repeat;
border-image: url(border.png) 27 fill repeat;

Answer 2

It is not actually recommended to do it this way. See this thread for details: How do I set a border-image?

Answer 3

You can use a background image and then position the background image to the right of each element. Usually this would go on either the a tag or li. For example:

#primaryNav a:link { 
 background-image: url('image.jpg');
 background-position: right;
 background-repeat: no-repeat;
 display: block; /* make the link background clickable */
}

If you don't want the border applied to the last (when using background-position: right;) or first (for background-position: left;) element in your menu then try the :last-child and :first-child selectors.

#primaryNav a:last-child {
   background: none;
}

Answer 4

There's a css property called border-image which could be what you're after. I'm not sure what the current browser support for it is though...

Answer 5

#primaryNav a:link { background: url('image.jpg') no-repeat right;
display: block; }

Typically good practice to code your background property's on a single line.

Answer 6

This is actually a new feature of CSS 3 and the property is called border-image. Unfortunately, it's not yet widely supported by today's browsers as it's still a candidate recommendation.