CSS User Interface

CSS User Interface

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

  • resize
  • outline-offset

Browser Support

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

Property Chrome IE Firefox Safari Opera
resize 4.0 Not supported 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Resize

resize The property specifies whether the element should (and how) be resized by the user.

This div element can be resized by the user!

Resize: click and drag the bottom right corner of this div element.

Note:Internet Explorer does not support the resize property.

The following example only allows users to adjust the width of the <div> element:

Example

div {
  resize: horizontal;
  overflow: auto;
{}

Try It Yourself

The following example only allows users to adjust the height of the <div> element:

Example

div {
  resize: vertical;
  overflow: auto;
{}

Try It Yourself

The following example allows users to adjust the height and width of the <div> element:

Example

div {
  resize: both;
  overflow: auto;
{}

Try It Yourself

In many browsers, <textarea> is default adjustable. Here, we use the resize property to disable this scalability:

Example

textarea {
  resize: none;
{}

Try It Yourself

CSS Outline Offset

outline-offset The property adds space between the outline and the element's edge border.

This div has a 15px outline outside the border edge.

Note:The outline is different from the border! Unlike the border, the outline is drawn outside the element's border and may overlap with other content. Additionally, the outline is not part of the element's size: the total width and height of the element are not affected by the width of the outline line.

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

Example

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;
{}

Try It Yourself

CSS User Interface Properties

The following table lists all user interface properties:

Property Description
outline-offset Adds space between the outline and the edge of the element's border.
resize Specifies whether an element can be resized by the user.