How do I make a transparent border with CSS

Question

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

User · Answer

This blog entry has a way to emulate border-color  transparent in IE6   The below example includes the  hasLayout  fix that is brought up in the blog entry comments      transparent border     testDiv       width  200px      height  200px      border  solid 10px transparent       IE6 fix     html  testDiv       zoom  1      border-color   FEFEFE      filter  chroma color  FEFEFE       Make sure that the border-color used in the IE6 fix is not used anywhere in the  testDiv element   I changed the example from pink to  FEFEFE because that seems even less likely to be used

User · Answer

hey this is the best solution I ever experienced   this is CSS3  use following property to your div or anywhere you wanna put border trasparent  e g   div class     border  10px solid  999   background-clip  padding-box     Firefox 4   Opera  for IE9   Chrome        this will work

User · Answer

Use transparent property   border-color   transparent

User · Answer

You could remove the border and increase the padding    x000D   x000D  li   x000D    display  inline-block  x000D    padding  6px  x000D    border-width  0px  x000D    x000D   x000D  li hover   x000D    border  1px solid  FC0  x000D    padding  5px  x000D    x000D   lt ul gt  x000D     lt li gt Hovering is great lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

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

User · Answer

Yep  you can use border  1px solid transparent  Another solution is to use outline on hover  and set the border to 0  which doesn t affect the document flow   li      display inline-block      padding 5px      border 0    li hover      outline 1px solid  FC0      NB  You can only set the outline as a sharthand property  not for individual sides  It s only meant to be used for debugging but it works nicely

User · Answer

Many of you must be landing here to find a solution for opaque border instead of a transparent one  In that case you can use rgba  where a stands for alpha    your class       height  100px      width  100px      margin  100px      border  10px solid rgba 255 255 255  5       Demo  Here  you can change the opacity of the border from 0-1    If you simply want a complete transparent border  the best thing to use is transparent  like border  1px solid transparent

User · Answer

Since you said in a comment that the more options you have  the better  here s another one    In CSS3  there are two different so-called  box models   One adds the border and padding to the width of a block element  while the other does not  You can use the latter by specifying  -webkit-box-sizing  border-box  -moz-box-sizing  border-box  -ms-box-sizing  border-box  box-sizing  border-box    Then  in modern browsers  the element will always have the same width  I e   if you apply a border to it on hover  the width of the border will not add to the overall width of the element  the border will be added  inside  the element  so to speak  However  if I remember correctly  you must specify the width explicitly for this to work  Which is probably not an option for you in this particular case  but you can keep it in mind for future situations

User · Answer

The easiest solution to this is to use rgba as the color  border-color  rgba 0 0 0 0   That is fully transparent border color

[css] How do I make a transparent border with CSS?

Examples related to css

Examples related to transparency

Examples related to border-color