Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I make a transparent border with CSS?

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?

like image 615
William Calleja Avatar asked Mar 24 '10 10:03

William Calleja


People also ask

Can a border have opacity CSS?

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.

How do you do transparency in CSS?

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

How do I make an image border transparent?

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.


1 Answers

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

like image 88
Douglas Avatar answered Oct 14 '22 16:10

Douglas