How to Remove Borders From Pictures in CSS

Cascading Style Sheets (CSS) is a standards-compliant method for styling your web pages. One of the most used and yet often confusing tasks is how to display the images properly. When images in your web pages are linked, sometimes they appear with a blue border surrounding them. Some browsers, such as Internet Explorer and Firefox, render pages to display this border. Fortunately, there is an easy way to fix this with CSS using two methods.

Things You'll Need

• Internet connection
• HTML text editor, such as BBEdit

Instructions

Link the External CSS File to Your HTML

1. Open your CSS style sheet or create a CSS file using your HTML text editor. If needed, name the new file and save it with the ".css" extension.

2. Add this border style rule to your CSS file: img: {border-style: none; }

3. Open your HTML file and in the document's "Head" element add: <link href="cssfilename.css" rel="stylesheet" type="text/css" media="all"> This links your CSS file to your HTML document.

4. Save both your CSS and HTML file.

Embed the Style Sheet in Your HTML

1. Open your HTML file.

2. In the document's "Head" element add: <style type="text/css"><!-- img:{border-style:none;} --></style>

3. Save your HTML file.

References

• Cascading Style Sheets, level 1
• Linking Style Sheets to HTML
• WWW FAQs: How do I remove the blue border around my image?

Resources

• css Zen Garden: The Beauty in CSS Design