Problem description

Given an HTML page with a card element <a class="accessible-card" href="#"> (which acts as a clickable card), write CSS to meet the following requirements:

• The card should have a soft box-shadow and rounded border-radius by default.

• When the card is :focus (for example, using the “Tab’’ key), it should display a thick, prominent blue box-shadow (0 0 0 4px rgba(38, 132, 255, 0.7)) around it.

• The default browser outline should not appear; only your custom box-shadow should show.

• The card should be visually distinct from the background.

Goal

Create an accessible card with a custom focus state that is visually clear, helping keyboard users track focus when tabbing through content.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.