THE WORLD'S LARGEST WEB DEVELOPER SITE
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP HOW TO JQUERY W3.CSS ANGULARJS XML MORE FORUM EXAMPLES REFERENCES

CSS User Interface

❮ Previous Next ❯

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 if (and how) an element should be resizable by the user.

This div element is resizable by the user!

To resize: Click and drag the bottom right corner of this div element.

Note: Internet Explorer does not support the resize property.

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 width of a <div> element:

Example

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

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

Example

textarea {
    resize: none;
}
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
This div has an outline 15px outside the border edge.

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 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

❮ Previous Next ❯