How to remove the border around a PNG image

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to remove the border around a PNG image
Most websites include images for informative and decorative purposes. (Digital Vision./Digital Vision/Getty Images)

When you include images in HTML Web pages, some browsers will display a border around them by default. This is particularly the case when the image is inside an anchor link element, and is more noticeable with certain types of image, such as transparent PNG files. You can remove the border that appears around any images in your Web pages using CSS (Cascading Style Sheet) code. The process only requires a small addition to your page markup code and should prevent the border from appearing in any Web browser your users access the site from.

Skill level:
Moderately Easy

Other People Are Reading

Instructions

  1. 1

    Add styling to your page. If you already have CSS code for your page, either in a dedicated style section in the page head area, or in a separate ".css" file, you can add the required code to that. If not, add a style section between the opening and closing head tags in your HTML page as follows: <style type="text/css">

    </style>

    Your style coding will be placed between these tags.

  2. 2

    Decide how to identify your image. When applying the CSS declaration to remove the border, you will need to decide what type of selector to use. For example, you can apply the border property to all image elements in the page using the following outline: img { /CSS declaration/ }

    To apply the declaration only to image elements that are inside anchor elements, use the following: a:link img { /CSS declaration/ }

    To apply the property only to elements with a particular ID or class attribute, use the following alternatives: /class/ .noBorder { /CSS declaration/ } /ID/

    noBorder {

    /CSS declaration/ }

    If your images are already selected within an existing CSS block, you can add the border removal declaration to that block instead.

  3. 3

    Remove the border. Inside your CSS block in which the relevant image is selected, add the following declaration: border:none;

    This instructs the user's browser not to display a border at all around the images selected by the CSS block. Some developers choose to apply a zero border width instead: border:0;

    This has the same effect as applying no border.

  4. 4

    Open your page in a Web browser. It's worth checking your Web page in as many different browser programs as possible, particularly when it comes to styling properties. The major browser programs include Internet Explorer, Firefox, Chrome, Safari and Opera, as well as mobile versions of these. Make sure the border setting has not upset any other visual elements within your pages. If it has, you may need to make some changes to your existing CSS code to achieve the appearance you want.

Tips and warnings

  • Your PNG image should render in the current versions of all major browsers, even if it includes transparency, which was not supported in certain older browsers.
  • CSS can cause Web pages to appear differently in different user environments, such as the browsers on smartphones and tablets.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.