CSS Outline

Code

.outline {
   outline: 3px solid black;
   outline-offset: -6px;
}

img[alt=""],
img[src=""],
img:not([alt]),
img:not([src]) {
   outline: 8px solid red;
}

Transcript

“Let’s dive in to CSS outline property, super useful for styling and debugging. Here we’ve added a 3px black outline. It applies to both the button and the circle quick and clean.

Next, with our outline offset we can create a double border effect. Push it out for space or pull it in for a unique look.

Now for debugging. Images without alt or src attributes, style them with a red outline to spot issues instantly. From styling to debugging, CSS outline is a simple let powerful tool.”