Member Avatar for fuchsia555

hi
how can i remove the dashed border that appear when clicking on sites's header button ?
i think it's css issue
any help please ?

  • 3 Contributors
  • 3 Replies
  • 209 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by macneato

Dani AI

Generated

The dashed rectangle is almost always a focus indicator (the browser’s keyboard focus ring shown when an anchor or button gets focus). In older browsers it can also be a legacy image border when an image is wrapped in a link. ’s suggestion targets the image border; pointed toward removing the outline. Both will hide the dotty line visually, but removing the focus indicator outright breaks keyboard accessibility unless you replace it with a clear alternative.

A modern, accessible fix is to restyle the focus state rather than erase it. Use the :focus-visible pseudo-class (shows for keyboard users in supporting browsers) and provide a custom visual — a subtle glow or inset — so keyboard users still get a clear cue. Example pattern:

.header-link { display: inline-block; }

.header-link:focus-visible {
  box-shadow: 0 0 0 4px rgba(0,123,255,0.25);
  border-radius: 4px;
}

/* fallback for older browsers */
.header-link:focus {
  box-shadow: 0 0 0 3px rgba(0,123,255,0.18);
}

Troubleshooting tips: use DevTools to force a :focus state and inspect which element (the link or the image) is receiving focus; remove any legacy HTML border attributes on images; check global CSS resets or framework rules that may already strip outlines; and always test keyboard-only navigation (Tab) across browsers (Firefox, Chrome, Edge, Safari). The goal is to remove the unwanted dashed look while preserving — and improving — the visible focus experience for users who rely on it.

Recommended Answers

All 3 Replies

Member Avatar for Phaelax

So the header graphic is a link? Simple CSS fix, add the following to the image: style="border:0;"

Member Avatar for fuchsia555

Thanks for reply Mr Phaelax

Member Avatar for macneato

You could also get links to not display them using the following

.example a {outline: none}
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.