THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS User Interface


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.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

Property
resize 4.0 Not supported 5.0
4.0 -moz-
4.0 15.0
outline-offset 4.0 Not supported 5.0
4.0 -moz-
4.0 9.5

CSS Resizing

The resize property specifies whether or not an element should be resizable by the user.

This div element is resizable by the user (works in Chrome, Firefox, Safari and Opera).

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

Example

div {
    resize: horizontal;
    overflow: auto;
}
Try it Yourself »

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

Example

div {
    resize: vertical;
    overflow: auto;
}
Try it Yourself »

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

Example

div {
    resize: both;
    overflow: auto;
}
Try it Yourself »


CSS Outline Offset

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

Outlines differ from borders in three ways:

  • An outline is a line drawn around elements, outside the border edge
  • An outline does not take up space
  • An outline may be non-rectangular
This div has an outline 15px outside the border edge.

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

Example

div {
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 15px;
}
Try it Yourself »

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