CSS outline
The CSS outline property is used to add a border around an element, outside the border edge of the element's actual box. It is often used to highlight elements or provide visual distinction without affecting the layout of the document.
The outline property can be styled using different properties such as color, style, and width. It is often used in combination with the :focus property to provide visual feedback when an element is in focus.
Let's take a look at some examples to understand how the outline property works.
Example 1: Basic outline
In this example, we have a div element with a red outline of 2px width. The outline is drawn outside the border edge of the element.
Example 2: Outlining a button on focus
In this example, we have a button that changes its outline to green when it is in focus and removes the outline when it loses focus. The outline is set to none initially to remove the default focus outline styling of the browser.
Example 3: Customizing outline style
In this example, we have a div element with a custom dashed outline of 4px width and orange color. You can customize the outline style by changing the width, style, and color values.
These are just a few examples of how you can use the outline property in CSS to add borders around elements. Experiment with different styles and properties to achieve the desired visual effects in your web projects.