css border onlick div
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: normal 1em / 1.5em BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
}
div {
position: relative;
display: inline-block;
}
div a {
display: block;
width: 6.25em;
height: 3.875em;
border: 0.5em solid #000;
}
div span {
position: absolute;
width: 5.25em;
height: 2.875em;
padding: 0.5em;
top: 0.5em;
left: 0.5em;
background-color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div>
<a href="https://www.coothead.co.uk/the-pale-blue-dot">link</a>
<span>the border is clickable</span>
</div>
</body>
</html>