• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

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.

← Previous Next →

CSS

online coding class codepractice

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)

codepractice logo
Login
Go Back Top