CSS User Interface

❮ Previous Next ❯

CSS User Interface

In this section, we'll explore some important CSS properties that affect how a website looks and behaves.

resize
outline-offset

CSS Resizing

The resize property tells us whether and how an element can be resized by the user.

This box can be resized by you!

To change the size: Grab the bottom right corner of this box and move it around.

In this example, users can adjust only the width of a <div> element.

Example

div {
resize: horizontal;
overflow: auto;
}

The following example lets the user resize only the height of a <div> element:

Example

div {
resize: both;
overflow: auto;
}

In most web browsers, the <textarea> element can be resized by default. In this example, we've utilized the resize property to prevent resizing:

Example

textarea {
resize: none;
}

CSS Outline Offset

The outline-offset property creates space between the outline and the edge or border of an element.

This box has a border that is outlined 15 pixels beyond its outer edge.

Note: The outline and border are not the same! While borders are drawn along the element's border, outlines are drawn outside the border and can overlap other content. Additionally, the outline doesn't contribute to the element's size; the total width and height of the element remain unaffected by the outline's width.

Here is a simple example that utilizes the outline-offset property. This property is used to create a gap between the border and the outline: