CSS User Interface

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); });

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 »

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1493883843099-0'); });

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 »