Question

I have a CSS Class:

.ImageBorder
{
border-style:solid; border-color:Black;
} 

I then set the CSS Class to an asp.net Image:

<asp:Image ID="Image3" runat="server" Height="150px" 
                ImageUrl="~/Photos/defaultA.jpg" CssClass="ImageBorder"  />

But it doesn’t work. It will work if I put the image in a div tag and then set the divs css class, but I’d rather not do this? What gives?

Answer 1

As noted in other answers, you should specify the border-width. You may experience an additional “gotcha”, though: asp images may have a “border-width:0” inline styling. In which case, your rule would need the !important declaration to override it:

.ImageBorder
{
border: 1px solid black !important;
}

The !important declaration ignores the normal rules of precedence that CSS follows. Normally, inline styling takes precedence over embedded or external style sheets, which take precedence over the user agent’s styling. An important property will take precedence over all non-important properties, regardless of where it is declared.

Using !important can lead to some frustration, however. Suppose you wanted to have an image with all the same qualities as your ImageBorder images, but with a width of 100. You might write

<img src="superBorderedImage.png" class="ImageBorder" style="border-width:100"/>

… But this will not work. You specified with great importance that ImageBorder images have width 1, so your “super bordered image” won’t have its special thick border. For this reason, you should use !important only when you’re certain you won’t need to override it later for special cases.