Fortunately, Internet Explorer 7 supports border-color: transparent, but
still, there are hardcore IE6 users and it seems that they will never update
This post is targeted to the developers that care and dare to make their
Thanks to a less known Internet Explorer CSS filter, the transparent border
in Internet Explorer 6 can be easily achieved. Consider the following lines of
border: solid 10px transparent;
It works correctly under Internet Explorer 7, FireFox, Opera and Safari,
while Internet Explorer displays a solid black border around .testDiv. To put it to work with
IE6, we will create another rule, that is visible only in version 6 (the
*html hack) with
just two lines of code:
… And voila! The ugly black border around .testDiv magically
The final things you should have in mind before using this trick is the color
(both border and chroma color) in the hack. Make sure you apply a border-color
(and respectively use it in the chroma filter) that is not used in that div, as the chroma
filter displays a certain color of the object and its content as
transparent, i.e. if the border-color in the hack is orange, and the text in
your element is orange as well, it will disappear when the orange chroma filter
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.
Copyright © 2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.