What is the purpose of the CSS `outline` property?
A
To add a shadow around text
B
To add space between elements
C
To draw a line outside the border of an element
D
To define the shape of the border
Analysis & Theory
`outline` draws a line outside the element’s border, commonly used for focus indication.
Which of the following correctly sets an outline in CSS?
A
outline: 2px solid red;
C
outline-color: solid red;
Analysis & Theory
`outline: 2px solid red;` sets width, style, and color of the outline.
How is `outline` different from `border`?
A
Outline appears inside the element
B
Outline is always dashed
C
Outline does not take up space and is drawn outside the border
D
Outline is thicker than border
Analysis & Theory
`outline` does not affect layout and is drawn outside the element’s border.
What does `outline: none;` do?
A
Makes the border invisible
B
Removes all outlines from the element
D
Sets outline to default
Analysis & Theory
`outline: none;` removes the outline, often used to remove focus indicators (not recommended for accessibility).
Which property sets the width of the outline?
Analysis & Theory
`outline-width` defines how thick the outline should be.
What is the default value of `outline-style`?
Analysis & Theory
If not specified, the default value of `outline-style` is `none` (no outline is visible).
Which of the following is a valid outline style?
Analysis & Theory
`dashed` is a valid value for `outline-style`. Note: `inset` and `groove` are not valid for outline.
Can `outline` have rounded corners like `border-radius`?
A
Yes, using `outline-radius`
B
No, outlines cannot be rounded
D
Only with `outline-style: round`
Analysis & Theory
Outlines do not support rounded corners — `outline-radius` is not a valid property.
Which property sets the color of an element’s outline?
Analysis & Theory
`outline-color` sets the color of the outline.
What is a common use case of `outline` in web development?
A
To increase margin spacing
C
To indicate focus on interactive elements
Analysis & Theory
`outline` is often used to show focus on buttons, links, and form inputs for accessibility.