HTML / CSS: Hide Text and Show Border

How can I show only the bord开发者_JAVA百科er of a div, but not the text using CSS?

---

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.

---

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

---

You can make the text the same color as the div's background. Or nest the text inside another div.