Thursday, June 18, 2015

Transparent Border Color in Internet Explorer 8 and Below

Normally, the css snippet below paints a transparent border to containers or divs using Mozilla Firefox, Chrome or IE9+.
 .NewsContent {  
  background-color: #fff;  
  border: 10px solid transparent;   
  background-clip: content-box;   
 }  
However, for other IE8 and below, I had a hard time figuring out how to make the border transparent. Luckily, I found a link: Border Color Transparent in IE6 which serves as the basis for the fix below:
 .NewsContent {  
      background-color: #fff;  
      border: 10px solid black;   
      filter: chroma(color=black);   
 }  
Afterwards, the border color changed to transparent. MSDN link: MSDN Chroma Filter
:)

0 comments:

Post a Comment