How can I remove the blue border around a linked image using CSS?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How can I remove the blue border around a linked image using CSS?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 27, 2023 pm 05:13 PM

如何使用 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 id="Tutorialspoint"> Tutorialspoint </h1>
   <h2 id="Linked-Images"> 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 id="Tutorialspoint"> Tutorialspoint </h1>
   <h2 id="Linked-Images"> 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 id="Tutorialspoint"> Tutorialspoint </h1>
   <h2 id="Linked-Images"> 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!

Statement

This article is reproduced at:tutorialspoint. If there is any infringement, please contact admin@php.cn delete

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about