html - div with border gradient only in the right side -


I have a div in my CSS and I want to implement the shield of the border just right? The other solution is to put an image on the right or to apply an image to my border, supported by all browsers or do I have to put an image in my drive right? This is my CSS code:

  # navigation li {list-style: none; } #navigation li {margin: 0; Width: 126px; Height: 40px; Padding-left: 0px; Padding-right: 0px; List-style: none; Swim left; Border color: gradient (start = #fff, end = # 000, midpoint = 50%); // Works? And for other browsers? }   

My html:

  & lt; Div id = "navigation" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "index.php" id = "index_btn" & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" id = "" & gt; Ajinda & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" id = "" & gt; PRODOTTI & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" id = "" & gt; PARTNER & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" id = "" & gt; News & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" id = "" & gt; CONTATTI & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; WebCat now supports gradient as border image (and at least 12 in chrome):    

  -webkit-border-image: -webkit-gradient (linear, left top, left bottom, from (# 00abeb), (#fff), color-stop (0.5, # FFF), color-stop (0.5, # 66 ccad)) 21 30 30 21 Repeat repeat;   

ProFlink -

Note: It is better to use gradient borders as an image for cross browser support >

See details in border-image information for this post:

Comments