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.
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.
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.
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.
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 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.,
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 ,
*{
Css declarations;
}
This selector is used to match all descendant elements of the parent element.
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;
}
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>
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 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
