The CSS outline property is used to draw a line around an element, outside of its border, without affecting the element's size or the overall document layout.
It's primarily used for accessibility, specifically to indicate the focus state of interactive elements (like links, buttons, and form fields) when a user navigates with a keyboard.
✔️ Key points:
Does not take up space: It sits on top of the layout and doesn’t shift surrounding elements.
Often used for focus styles (e.g., keyboard navigation).
Can be customized with color, style, and width.
Different from border: Borders affect element size; outlines do not.
#🛠️ Shorthand and Properties:
The outline property is a shorthand for three individual properties. The outline-style is mandatory for the outline to be visible.
outline-width: Sets the thickness of the line (e.g., 2px, medium, thick).
.outline-style: Sets the appearance of the line (e.g., solid, dotted, dashed, double, groove).
outline-color: Sets the color of the outline.
#Basic Syntax:
a:focus {
outline: 3px solid #ff9900; /* width | style | color */
outline-offset: 2px; /* Adds 2px of transparent space */
}
Property & values:
Property
Description
outline-color
Sets the outline color
outline-style
solid,dashed,dotted etc.
outline-width
thickness(in px,%,em,rem etc.)
outline-offset
Space between the border and outline
Example:
<style>
/* Button gets an outline when focused or clicked */
button:focus {
outline: 3px solid #4a90e2;
}
/* Div shows outline on hover */
.box {
width: 200px;
height: 80px;
background: #f0f0f0;
border: 2px solid #888;
}
.box:hover {
outline: 4px dashed red;
outline-offset: 5px;
}
</style>
<p>Click the button or hover the box:</p>
<button>Focus me!</button>
<div class="box">
Hover over me!
</div>
Output:
Click the button or hover the box:
Hover over me!
#CSS Shadows:
In CSS, shadows are visual effects that create a sense of depth by adding blurred or offset shading to elements or text. There are two main types:
1.Box-Shadow:
box-shadow is a CSS property that adds shadow effects around an element’s box—such as <div>, <button>, <img> and more. It can create soft, sharp, inner, or multiple shadows.
✅ Basic Syntax:
box-shadow: offset-x offset-y blur-radius spread-radius color inset;
Only offset-x and offset-y are required.Rest are optional.
offset-x → horizontal shadow position
offset-y → vertical shadow position
blur-radius → how soft the shadow looks
spread-radius → expands or shrinks the shadow
color → any CSS color
inset → makes the shadow appear inside the element
Example:
<style>
.card {
width: 250px;
height: 120px;
background: red;
padding: 20px;
border-radius: 8px;
box-shadow: 25px 25px 25px rgba(72, 187, 18, 0.3);
}
</style>
<div class="card">
This box has a shadow.
</div>
Output:
This box has a shadow.
#Multiple box-shadows:
You can apply multiple shadows to the same element using comma-separated box-shadow values. Each shadow is rendered in order (first = bottom layer, last = top layer).
<style>
.card {
width: 260px;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow:
0 6px 12px rgba(0,0,0,0.25), /* main drop shadow */
0 0 12px rgba(0,150,255,0.5), /* blue outer glow */
inset 0 3px 6px rgba(0,0,0,0.2); /* inner soft shadow */
}
</style>
<div class="card">
This box has multiple shadows.
</div>
Output:
This box has multiple shadows.
2.Text-Shadow:
text-shadow is a CSS property that adds shadows behind text. You can use it to create depth, glow, neon effects, outlines, and more.
