Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to eliminate blue borders around linked images using CSS?
When images are used as hyperlinks, older browsers may display a default blue border around them, similar to how hyperlinked text appears underlined in blue. This article explains how to eliminate these unwanted borders using CSS.
Syntax
a img {
border: none;
}
What are Linked Images?
Linked images are images wrapped inside anchor (<a>) tags to create clickable hyperlinks. In older browsers like Internet Explorer 6-8, these images automatically receive a blue border to indicate they are clickable links.
Method 1: Removing Borders Completely
The most common approach is to remove the border entirely using the border: none property with the descendant selector a img
<!DOCTYPE html>
<html>
<head>
<style>
a img {
border: none;
max-width: 200px;
height: auto;
}
.container {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Linked Image Without Border</h2>
<a href="https://www.tutorialspoint.com/">
<img src="/css/images/logo.png" alt="TutorialsPoint Logo">
</a>
</div>
</body>
</html>
A clickable image appears with no visible border, even in older browsers that would normally show a blue border around linked images.
Method 2: Custom Border Style
Instead of removing the border completely, you can override the default blue border with your own custom styling
<!DOCTYPE html>
<html>
<head>
<style>
a img {
border: 3px solid #ff6b35;
border-radius: 8px;
max-width: 200px;
height: auto;
transition: border-color 0.3s ease;
}
a img:hover {
border-color: #4CAF50;
}
.container {
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2>Linked Image With Custom Border</h2>
<a href="https://www.tutorialspoint.com/">
<img src="/css/images/logo.png" alt="TutorialsPoint Logo">
</a>
</div>
</body>
</html>
A clickable image appears with an orange rounded border that changes to green when hovered, replacing any default blue border styling.
Modern Browser Behavior
Modern browsers like Chrome, Firefox, Safari, and Edge do not display blue borders around linked images by default. However, using border: none ensures consistent appearance across all browsers and prevents any unexpected styling issues.
Conclusion
Use a img { border: none; } to eliminate blue borders around linked images in older browsers. Modern browsers don't show these borders by default, but applying this CSS ensures consistent cross-browser compatibility.
656 Views
