This site is mobile accessible. Press the "Tap Here" button to use a smaller font-size. Tap Here!

Smartphone icons created by Freepik - Flaticon

14.3 CSS User Interface

In this chapter you will learn about the following CSS user interface properties:

• resize
• outline-offset

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
resize	4.0	79.0	5.0	4.0	15.0
outline-offset	4.0	15.0	5.0	4.0	9.5

CSS Resizing

The resize property specifies if (and how) an element should be resizable by the user.

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

Example 1: Allow resize width only

div {
  resize: horizontal;
  overflow: auto;
}

Example 2: Allow resize height only

div {
  resize: vertical;
  overflow: auto;
}

The following example lets the user resize both the height and width of a <div> element:

Example 3: Allow resize both height and width

div {
  resize: both;
  overflow: auto;
}

In many browsers, <textarea> is resizable by default. Here, we have used the resize property to disable the resizability:

Example 4: Disable resize in textarea

textarea {
  resize: none;
}

CSS Outline Offset

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

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

The following example uses the outline-offset property to add space between the border and the outline:

Example 5: The outline-offset property

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
}

div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

CSS User Interface Properties

The following table lists all the user interface properties:

Property	Description
outline-offset	Adds space between an outline and the edge or border of an element
resize	Specifies whether or not an element is resizable by the user