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

by

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.

 


0
2

2 Comments

anonymous by Mr. vannhuy on 8/22/2010
Thanks a lot!!!!!
anonymous by Phil on 2/24/2011
This is the coolest thing I have ever seen! Helped a lot, thanks!

Add your comment

by Anonymous - Already have an account? Login now!
Your Name:  

Comment:  
Enter the text you see in the image below
What do you see?
Can't read the image? View a new one.
Your comment will appear after being approved.

Related Posts


If you do any sort of ASP.NET programming there usually comes a time when you need to get a websites Base URL. The following shows two examples, the first example shows how to get the Base Site Url using C#, which can be used for getting both the...  more »

You may need to have an image refreshed automatically on a web page in ASP.NET to get the latest image. One instance where you might want the fresh image is if you upload an image that has the same file name as an already existing image file on the...  more »

This is one of those simple web page design things that can drive a web developer absolutely crazy.  more »