Member Avatar for AycheKay

My images contained inside a tags have blue borders around them. How do I get rid of these borders?

Here's what I've been trying and it doesn't work:

#gallery .a .img {
   border-style: none;
}
  • 2 Contributors
  • 2 Replies
  • 103 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by AycheKay

Dani AI

Generated

Quick summary: the blue outline comes from the image being a link and a browser or stylesheet applying a border. correctly fixed the selector so the rule actually targets images nested inside anchor tags in your gallery, and confirmed it solved the issue. The core idea is to override whatever CSS or legacy HTML attribute is giving the linked image a border.

Troubleshooting steps that help locate the culprit: open the browser inspector, select the image and look at the computed styles to see which rule sets border, outline or box-shadow. Check for a legacy border attribute on the IMG tag or a framework class (Bootstrap’s thumbnail/image classes can add borders). If the rule you add doesn’t apply, the problem is CSS specificity or load order — make your rule at least as specific and ensure it loads after the conflicting stylesheet.

Accessibility and caution: do not remove keyboard focus indicators blindly. outline is often used to show focus; removing it without replacing it with a visible focus style will harm keyboard users. Provide an alternative visible focus style if you alter outlines or focus rings. For background reading on selectors, specificity and focus outlines see the MDN docs on CSS selectors and borders and the WebAIM guidance on keyboard accessibility.

Extra tips: remove deprecated HTML attributes where possible and prefer CSS, re-test across browsers, and clear caches. If a framework is involved, check its utility classes first before adding overrides.

Recommended Answers

All 2 Replies

Member Avatar for scrappedcola

If you are trying to specifically hit all images that are inside anchors that are inside an element with an id of gallery then you will want to define it this way:

#gallery a img {
   border: none; /* could still be border-style:none; but this just takes care of it as well */
}

The way you were doing it was targeting elements that had a class of "img" contained in elements with class "a" inside an element with id "gallery". Tags are referenced by just the tag name. Classes have the "." and id's have the "#".

Member Avatar for AycheKay

thanks, that did the trick.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.