?️ CSS User Interface

⚡ Quick Overview

The CSS User Interface module includes properties that control how elements visually respond to the user. In this topic, we focus on two useful UI properties: outline-offset and resize. They help improve focus styling and let users resize elements such as textareas.

These properties are especially important for accessibility and usability: they make it easier for users to see which element is selected and to adjust areas where they type or view content.

? Key Concepts

outline-offset controls the space between an element’s border and its outline.
Outlines are drawn outside the element’s border and do not affect layout.
resize allows users to resize elements (commonly <textarea>).
Resizing can be enabled in both directions, one direction, or disabled completely.
Combining resize with overflow gives you more control over scrollable areas.

1️⃣ outline-offset

The outline-offset property moves the outline away from (or closer to) the edge of an element. Outlines are drawn outside the border, and outline-offset defines the gap between the outline and the border.

Positive values push the outline outward, creating a nice “halo” effect around focused elements. Negative values pull the outline closer or even inside the border edge.

? Syntax & Example

? View Code Example

/* outline-offset syntax and example */
/* Syntax */
outline-offset: <length> | initial | inherit;

/* Example */
.my-element {
  outline: 2px solid #ff6f61;
  outline-offset: 5px;
}

? Live Demo: outline-offset

Below, both boxes have an outline. The only difference is the outline-offset value.

outline-offset: 5px;
The red outline is pushed 5px away from the blue border.

outline-offset: -5px;
The red outline is pulled 5px closer, overlapping the border area.

Try changing the offset value to see how far the outline moves relative to the border.

2️⃣ resize

The resize property allows a user to resize an element (usually a <textarea> or <div>) by dragging its corner or edge. It controls which directions resizing is allowed.

This is helpful for giving users more space to type or view content, while still keeping the layout under control.

? Syntax & Example

? View Code Example

/* resize property syntax and example */
/* Syntax */
resize: none | both | horizontal | vertical | block | inline | initial | inherit;

/* Example */
textarea {
  resize: both;
}

? Live Demo: resize

resize: both (default browser behavior)

resize: none (resizing disabled)

Try dragging the bottom-right corner of each textarea. The first one can be resized freely, while the second one is locked.

? Use Cases

Highlighting focused form fields using outline and outline-offset for better keyboard navigation.
Allowing users to expand comment boxes or code editors with resize: both.
Locking the size of critical layout components using resize: none so the page design stays intact.

? Tips & Best Practices

Use outline-offset with a small positive value (like 2px–6px) to make focus outlines easier to see without crowding the element.
Negative outline-offset values can be useful for tighter designs, but check that the outline is still clearly visible.
Remember: outlines do not affect layout, so they’re great for accessibility-focused focus indicators.
Use resize mainly on elements that contain text or scrollable content (like textareas).
Pair resize with overflow: auto; so scrollbars appear when content exceeds the element size.
Use resize: none when resizing could break your layout or overlap other elements.

? Try It Yourself / Practice Tasks

Create a button with a visible outline that has an outline-offset of 8px. Test how it looks when the button is focused.
Make a <textarea> that can only be resized horizontally using resize: horizontal;.
Apply a negative outline-offset (for example, -4px) to a box and observe how the outline moves closer to or inside the border.
Combine resize with max-width and max-height so users can resize elements, but only up to a certain limit.