How to Add a CSS Border to an ASP.NET Image Control

Adding a CSS border to an ASP.NET Image control was a mystery to me for the longest time.  While you could easily use an html image and add the runat="server" to it and then add CSS, I really wanted to use an asp:Image control along with a CSS border. 

However, the render method of the asp:Image control seems to turn off the border by default by loading a style="border-width:0px;" as its border for the image, so when you try to use a CSS border style with the asp:Image control it doesn't work as expected.  Fortunately, there's an easy way around this issue using CSS and that is to apply the !important tag to the css border property.  This will  ensure that the border is applied to the asp:Image control. 

For instance, add the !important tag to your CSS class for the asp:Image like so:

.my-image
{
padding: 3px;
background-color: #ffffff;
border: solid 1px #DFEFFF !important;
}

Here's the what the asp.net image control looks like with a style applied to it using CssClass:

<asp:Image ID="ThumbnailImage" runat="server" CssClass="my-image" />

By using the !important declaration, it will override the default border style attribute of the asp:Image control. Essentially, with the help of the !important tag, you're able to use CSS border styles seemlessly with the asp:Image control.