HTML / CSS: Hide Text and Show Border

Question

How can I show only the border of a div, but not the text using CSS?

Answer 1

This is not well supported by IE, but you could use:

#mydiv { color:rgba(0,0,0,0); border:1px solid #000 }

This makes the text color fully transparent, but leaves the border visible.

Answer 2

A simple cross-browser solution is the Phark "text indent" method. It's usually used for image replacement.

div.example {
   border: 2px solid red;
   /* Hide text inside "off left" */
   text-indent: -10000px;
   /* Make sure to set a width and height */
   height: 100px;
   width: 100px;
}

Pros:

• Doesn't need any extra elements
• Works in screen-readers

Cons:

• Doesn't work in IE5