How can I remove the blue border around a linked image using CSS?
A website without visuals is boring, and even if it has a great design, most of us would probably prefer a website with a lot of graphics. Why is this so? Images are a quick and easy way to enhance the user experience of your website. 90% of the information we perceive and send to our brain is visual. You can use images to grab attention and refocus your visitors’ attention.
They can be very helpful when conveying important information. Images are a fantastic emotional trigger that you can use to engage your visitors and keep them reading your content.
CSS allows us to style and position these images to create fantastic visual effects. When we use an image as a hyperlink, some old browsers will display it with a default blue border. In this article, we will discuss how to change or eliminate the blue border around a linked image using CSS.
What is a link image?
Linked images are images added to web pages that serve as hyperlinks. In order to create a hyperlink, we need to add an image inside the element. Let's create a simple hyperlink image in an HTML page.
Add linked image using older browsers
If you add an image as a hyperlink using an older version of the browser (e.g. Internet Explorer 6-8, Firefox 7, etc.), a blue border will appear around the image by default. This is similar to the effect given to hyperlink text. By default, hyperlink text is underlined in blue and the font color is highlighted on mouseover.
Example
Let's use Internet Explorer 6 to add an image as a hyperlink.
<!DOCTYPE html>
<html>
<head>
<title> Linked Images </title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
img{
max-width: 50%;
height: 10%;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/static/images/logo-color.png" alt= "tutorialspoint"> </a>
</body>
</html>
NOTE - Run this program in Internet Explorer 6, otherwise you won't see the default blue border if you use any other modern browser.
How to eliminate the default behavior of hyperlinked images?
There are two ways to eliminate this default behavior. One way is to remove the border from the image completely, another way is to add your own border style to the image. To select all hyperlinked images, we will use CSS selectors.
CSS Selector
CSS selector is the beginning part of the CSS rule. It is a sequence of elements or other terms used to tell the browser which element must be selected so that a CSS property value (specified in a rule) can be applied. CSS selectors enable developers to select (or match) HTML elements that you want to style in a web page.
There are many types of selectors. They are as follows -
Simple selector – It selects elements using their name, id, class.
Combined Selector – It selects elements using the relationship between elements (e.g. parent-child relationship).
Pseudo-element selector – It selects a part of an element, such as a span.
Attribute Selector – It selects elements using their attributes or their attribute values.
A few examples of CSS selectors are CSS element selector, CSS group selector, CSS id selector, CSS universal selector, etc.,
Universal CSS Selector
CSS asterisk (*) Selector, also known as CSS universal selector, is used to select or match all elements or parts of elements of the entire web page at once. Once selected, you can use any CSS custom properties to style them accordingly. It matches any type of HTML element like ,
grammar
*{
Css declarations;
}
Use parent-child selector
This selector is used to match all descendant elements of the parent element.
grammar
parent child{
css declarations;
}
We can remove the default blue border style by writing border: none using CSS parent-child selector as shown below -
a img{
border: none;
}
Example
Let’s see an example -
<!DOCTYPE html>
<html>
<head>
<title>No border linked image</title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: none;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.tutorialspoint.com/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
Custom border style
We can remove the default blue border of the hyperlink image by overriding it with your own border style.
<!DOCTYPE html>
<html>
<head>
<title> No border linked image </title>
<style>
*{
margin: 10px;
padding: 5px;
letter-spacing: 1px;
}
h1{
color: green;
text-decoration: underline;
}
a img{
max-width: 50%;
height: 10%;
border: 4px dotted orange;
}
</style>
</head>
<body>
<h1> Tutorialspoint </h1>
<h2> Linked Images </h2>
<a href= "https://www.tutorialspoint.com/index.htm/"> <img src= "https://www.tutorialspoint.com/images/logo.png" alt= "Tutorialspoint"> </a>
</body>
</html>
in conclusion
In this article, we discuss old browsers that display a blue border around hyperlink images and ways to eliminate the default behavior. However, modern browsers like Chrome, Edge, Firefox, etc. do not display any borders around images by default.
The above is the detailed content of How can I remove the blue border around a linked image using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
Building an Ethereum app using Redwood.js and Fauna
Mar 28, 2025 am 09:18 AM
With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Let's use (X, X, X, X) for talking about specificity
Mar 24, 2025 am 10:37 AM
I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and
