Outline properties
Outline is a css property which is very much similar as border property and is written the same
way :
outline: 1px solid black.
Whenever we focus on an element then for the purpose of highlighting it, we use outline
property.
//css
button:focus{
outline: 1px solid green;
}
Clicking on a button element will have a focus of 1px solid green on the button element.
The purpose of using this is to let users know which element has focus currently. It happens also when
you press tab and different elements get focus and then the applied style displays.
Only difference between border and outline is that outline does not take
space in the UI and is placed on the top of the html element and outside html elements dimension.
The general syntax for writing the outline is :
outline: <outline-width> <outline-style> <outline-color>;
- outline-width : represents width of the outline in two way such as 1px or 3px etc in px values or using predefined values of thin, medium, or thick.
- outline-style : represents style of the outline. Values such as solid, double, dotted, groove, dashed, ridge are commonly used.
- outline-color : represents color of the outline. Values such as color keyword (e.g grren, blue etc), hexadecimal value (#234432), RGB value such as rgb(255,123,234) are used.
This outline property can be applied on both block or inline or inline-block elements.
It is worth noting that we do not use this much but very occasionally.
A simple button element (default or without focus) looks like below:
And to see a outline, please click on the below button.
Clicking will apply an outline on this button of "3px solid green: