图像边框在chrome和firefox中消失，但在IE中出现

Question

Borders are added around images using

img
{
    border-color: #bbbbbb;
}

Images are defined in html like

    `<img src="/Thumb?product=CPU-EP0520EL01">`

Image size is 130x130 pixels according to browser image properties. In Firefox and Chrome borders do not appear.

Firebug inspect element Style tab shows like style is applied properly:

img {
    border-color: #BBBBBB;
}
.category-list li a, ul#category-list li .button {
    font-size: 11px;
}
a:link, a:visited {
    color: #A80000;
    font-weight: bold;
}
.category-list li {
    text-align: center;
}
.category-list {
    list-style: none outside none;
}
body {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
} 

In Internet Explorer 9 borders appear properly. Jquery ui default stlye is used. I added ui-corner-all class to img element but problem persists: borders are not shown. (IE9 shows rounded borders properly in this case).

How to show rounded borders around images in Chrome and FireFox ?

Answer 1

The correct way to use it would be

img{
border:1px solid #bbb;
}

where first parameter defines the width of the border, the second one defines type of the border and the third one is the color of it. You can read about borders here

Answer 2

try:

display: block;
border: 1px solid #bbbbbb;