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?

Solution 1

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;
}

Solution 2

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;

Solution 3

#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.

Solution 4

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.

View more solutions