• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Outline

← Previous Next →

🔹 What is CSS Outline?

A CSS Outline is a line drawn outside the element’s border to make it stand out.
It does not take up space and does not affect the layout.

🔸 Basic Syntax
element {
  outline: 2px solid red;
}

  • 2px → outline width

  • solid → outline style

  • red → outline color

🔸 Outline vs Border

Feature Border Outline
Affects Layout Yes No
Can be Rounded Yes (border-radius) No
Position Inside element box Outside border

🔸 Outline Properties

  1. outline-style: Type of outline

  2. outline-color: Color of the outline

  3. outline-width: Thickness of the outline

  4. outline-offset: Space between border and outline

  5. outline: Shorthand for width, style, color

Example:
button {
  outline-style: dotted;
  outline-color: green;
  outline-width: 3px;
  outline-offset: 5px;
}

🔸 Outline Shorthand

input {
  outline: 2px dashed blue;
}

🔸 Outline Offset

Moves the outline away from the element border.

div {
  outline: 2px solid black;
  outline-offset: 10px;
}

Practice Questions

Q1. Add a 3px solid black outline to a <div>.

Q2. Apply a dotted green outline to all <p> tags.

Q3. Set only the outline color of a button to blue.

Q4. Set a dashed outline of 2px to all input fields.

Q5. Create a rule using shorthand to set a red 4px double outline.

Q6. Add 10px space between the border and outline using outline-offset.

Q7. Write a class .highlight that gives a yellow solid outline.

Q8. Apply a groove-style outline to a section element.

Q9. Create a hover effect that adds a 2px solid outline to a card.

Q10. Set outline-width, outline-style, and outline-color individually on a heading.

CSS Outline Quiz

Q1: What does the CSS outline property do?

A. Draws a border inside the element
B. Draws a line outside the border
C. Sets text color
D. Applies shadow

Q2: Which of the following outlines takes up space in the layout?

A. Solid outline
B. Dashed outline
C. Border
D. None

Q3: Which property moves the outline away from the element?

A. outline-spacing
B. outline-margin
C. outline-offset
D. outline-gap

Q4: Which of these is a valid outline style?

A. round
B. groove
C. ridge
D. dashed

Q5: What is the correct shorthand syntax for outline?

A. outline: red solid 2px;
B. outline: 2px solid red;
C. outline-style: red solid 2px;
D. outline = 2px red solid;

Q6: Which property does NOT exist for outlines?

A. outline-color
B. outline-style
C. outline-radius
D. outline-width

Q7: Which outline style creates a dotted line?

A. outline: dashed
B. outline: dotted
C. outline: solid
D. outline: round

Q8: How to add an outline only when an element is focused?

A. div:hover {}
B. div:focus { outline: 2px solid blue; }
C. div:active {}
D. div:selected {}

Q9: Which is true about outlines?

A. They support border-radius
B. They occupy layout space
C. They are outside the border
D. They increase box size

Q10: Which of these will add a 2px red dashed outline to an element?

A. outline: red 2px dashed;
B. outline: dashed red 2px;
C. outline: 2px dashed red;
D. outline: 2 red dashed px;
← Previous Next →
Login
Go Back Top