Nearby lessons

15 of 15

CSS: outline-offset Property

📌 What is CSS outline-offset Property?

The outline-offset CSS property sets the space between an element's border and its outline. This allows you to visually separate the outline from the border using positive or negative values. It's useful for enhancing focus indicators or decorative styling without altering layout.

1️⃣ Basic Usage of outline-offset

outline-offset creates space between the border and the outline. The value can be in px, em, or other length units.

Example02
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

2️⃣ Dashed Outline with Smaller Offset

You can customize the outline style and use a smaller offset for a tighter gap.

Example03
Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3