I have an li
styled as follows:
li{ display:inline-block; padding:5px; border:1px solid none; } li:hover{ border:1px solid #FC0; }
When I hover over the li
the border appears without making the li
's shift around. Is it possible to have a 'border' that's not visible?
it can be done - but not with broad cross-browser support. However, chances are good that any browser that supports css opacity on background color would also support rgba(...) in border colors.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
Click "Edit" and select "Fill" to get options to fill the border with a color or pattern. You'll also get the option to set the opacity, which will determine how transparent your border is. Set the opacity to 100 percent for a fully transparent border, or 50 percent for a semi-transparent border.
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With