Html – Can you assign an image to border-right

border, css, html, image

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


But this didn't work.

How do I do it?

Best Solution

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