CODEWITHSUNDEEP
htmlcssimageborder
RSM
RSM

Reputation: 15108

Can you assign an image to border-right?

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?

Upvotes: 11

Views: 37039

Answers (6)

Dylan Valade
Dylan Valade

Reputation: 5605

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

Upvotes: 17

dobrosi
dobrosi

Reputation: 81

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;

Upvotes: 8

Christopher Marshall
Christopher Marshall

Reputation: 10736

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

Upvotes: 1

Marco Miltenburg
Marco Miltenburg

Reputation: 6138

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.

Upvotes: 1

lc2817
lc2817

Reputation: 3742

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

Upvotes: 0

Gareth
Gareth

Reputation: 5719

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

Upvotes: 0

Related Questions