Question

I have a CSS style which sets up a particular ‘-webkit-border-image’ property for an ‘a’ tag (to allow a scaling image to be used as a surrounding frame).

My question is how to establish a separate style rule which will override this so that no border image will be applied. I’ve tried the following:

-webkit-border-image: none !important;

That doesn’t seem to do anything – at least in Chrome Mac 15.0.874.83 beta.

I can’t simply disable the border, or set the border width to zero, since this particular style needs a border (which is set up using a separate rule).

Any hints would be appreciated.

Notes:
The -webkit-border-image forms an outer border around an ‘a’ element. I need to remove JUST the -webkit-border-image, not the whole border. The ‘a’ element also has a style rule of:

border: 4px solid rgba(13,13,13,0.88);

and I need to retain this, so I can’t just do:

border: none

Here’s an example. Note that I also can’t remove the offending class from the element – the markup is fixed.

Thanks.

Answer 1

I looked into its W3school entry to see what the default value is, it looks like its:

-webkit-border-image: none 100% 1 0 stretch;

i tried your jsfiddle link and i dont see any border images when i view as is on mac safari 5.1 and mac chrome 14.0