CSS Outline Practice Questions with Solutions

By /

Introduction

CSS outlines are lines drawn outside an element’s border. Unlike borders, outlines do not take up extra space in the layout. They are commonly used to highlight buttons, input fields, links, and other elements when they receive focus. In this chapter, you’ll practice CSS outline properties through simple solved questions that are perfect for beginners. CSS Outline practice questions with solutions help to understand the concepts.

Question 1: Add a Solid Outline Around a Div

Problem Statement

Write CSS to add a 2px solid blue outline around a <div> element.

CSS Code

div {
    outline: 2px solid blue;
}

Output

The <div> displays a 2px solid blue outline outside its border.

Explanation

  • outline is a shorthand property.
  • 2px sets the outline thickness.
  • solid defines the outline style.
  • blue sets the outline color.
  • The outline appears outside the border.

Question 2: Change the Outline Color

Problem Statement

Write CSS to add a 3px solid red outline around a paragraph.

CSS Code

p {
    outline: 3px solid red;
}

Output

The paragraph displays a 3px solid red outline.

Explanation

  • outline highlights the paragraph.
  • red changes the outline color.
  • Outlines are often used to draw attention to important elements.

Question 3: Apply a Dashed Outline

Problem Statement

Write CSS to add a 2px dashed green outline around an <h2> heading.

CSS Code

h2 {
    outline: 2px dashed green;
}

Output

The <h2> heading displays a green dashed outline.

Explanation

  • dashed creates a broken-line outline.
  • 2px defines the thickness.
  • green sets the outline color.

Question 4: Apply a Dotted Outline

Problem Statement

Write CSS to add a 4px dotted purple outline around a <section> element.

CSS Code

section {
    outline: 4px dotted purple;
}

Output

The <section> displays a purple dotted outline.

Explanation

  • dotted creates an outline made of dots.
  • 4px controls the thickness.
  • purple changes the outline color.

Question 5: Add Space Between the Border and Outline

Problem Statement

Write CSS to create a 2px solid blue outline with a 10px gap between the border and the outline.

CSS Code

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

Output

The <div> displays:

  • A black border
  • A blue outline
  • A 10px gap between the border and the outline

Explanation

  • outline-offset creates space between the border and the outline.
  • The border and outline remain separate.
  • This property makes highlighted elements easier to notice.

Question 6: Use Individual Outline Properties

Problem Statement

Write CSS to create a 3px solid orange outline using individual outline properties.

CSS Code

div {
    outline-width: 3px;
    outline-style: solid;
    outline-color: orange;
}

Output

The <div> displays a 3px solid orange outline.

Explanation

  • outline-width sets the thickness.
  • outline-style defines the outline style.
  • outline-color changes the outline color.
  • These properties provide more control than the shorthand property.

Question 7: Apply a Double Outline

Problem Statement

Write CSS to add a 5px double green outline around a paragraph.

CSS Code

p {
    outline: 5px double green;
}

Output

The paragraph displays a 5px double green outline.

Explanation

  • double creates two outline lines.
  • 5px sets the outline thickness.
  • green changes the outline color.
  • Double outlines can be used to emphasize important elements.

Question 8: Highlight an Input Field on Focus

Problem Statement

Write CSS to display a 2px solid blue outline when a text input field receives focus.

CSS Code

input:focus {
    outline: 2px solid blue;
}

Output

When the user clicks inside the input field, a blue outline appears around it.

Explanation

  • :focus targets an element that is currently selected.
  • The outline appears only when the input field is active.
  • This helps users identify the currently focused input field.

Question 9: Remove the Default Outline

Problem Statement

Write CSS to remove the default outline from a button.

CSS Code

button {
    outline: none;
}

Output

The button displays without the default outline.

Explanation

  • outline: none; removes the browser’s default outline.
  • This is often used when creating custom button styles.
  • If you remove the default outline, provide another visible focus style to maintain keyboard accessibility.

Question 10: Style a Button with an Outline

Problem Statement

Write CSS to create a button with a 3px solid purple outline and a 5px outline offset.

CSS Code

button {
    outline: 3px solid purple;
    outline-offset: 5px;
}

Output

The button displays:

  • A 3px solid purple outline
  • A 5px gap between the button border and the outline

Explanation

  • outline creates the outer line.
  • outline-offset moves the outline away from the border.
  • This style makes buttons more noticeable and improves focus visibility.

Key Takeaways

  • An outline is drawn outside an element’s border.
  • Outlines do not affect the element’s size or layout.
  • The outline shorthand combines width, style, and color.
  • Individual outline properties provide more control.
  • outline-offset creates space between the border and the outline.
  • The :focus pseudo-class is commonly used with outlines for form elements.
  • If you remove the default outline, always provide an alternative focus indicator for better accessibility.

Frequently Asked Questions (FAQs)

1. What is a CSS outline?

A CSS outline is a line drawn outside an element’s border. It is commonly used to highlight elements without changing their size.

2. What is the difference between a border and an outline?

A border is part of the element’s box and affects its size, while an outline is drawn outside the border and does not affect the layout.

3. Does an outline take up space?

No. An outline does not occupy space in the page layout.

4. What is outline-offset?

The outline-offset property creates space between the border and the outline, making the outline appear farther from the element.

5. Why is the :focus pseudo-class used with outlines?

The :focus pseudo-class highlights the element currently selected by the user, improving navigation and accessibility.

6. Is it safe to use outline: none;?

Yes, but only if you replace it with another visible focus style. Removing the outline without an alternative can make keyboard navigation difficult.

7. When should I use an outline instead of a border?

Use an outline to highlight focused or selected elements because it does not change the element’s size or affect the surrounding layout.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top