Hello! Today we want to talk about CSS outline. For those who are new to CSS, there may be some confusion between border and outline. But don't worry! We aim to thoroughly examine this topic so that you can effectively utilize it.
First of all, let's clarify what an outline is. An outline is a line that surrounds an element, but unlike a border, it does not take up space around that element. This feature is useful when you want to focus the user’s attention on a specific element without altering the layout of the entire page.
Outlines can have color, style (like dotted, dashed, solid), and width. To set all of these at once, you can utilize the outline property.
Now, let's take a look at how to use outlines in CSS. For example, suppose you have a button that you want to have a focus outline around it.
button:focus {
outline: 3px solid red;
}
Okay, now let's explore step-by-step what this code does.
button:focus
This CSS code states that when the button is in focus, the defined styles will be applied.
outline: 3px solid red;
This line of code sets an outline with a thickness of 3 pixels, a solid style, and a red color around the button.