CSS User Interface

CSS provides many user interface features like resizing elements, outlines and box sizing.

Following is a list of some common properties of CSS3 user interface:

Values	Description
appearance	It facilitates users to make elements as user interface elements.
box-sizing	It facilitates users to fix elements on area in clear way.
icon	It is used to provide the icon on area.
resize	It is used to resize elements which are on area.
outline-offset	It is used to set space between an outline and the edge or border of an element.
nav-down	It is used to move down while pressing the down arrow button in keypad.
nav-left	It is used to move left while pressing the left arrow button in keypad.
nav-right	It is used to move right while pressing the right arrow button in keypad.
nav-up	It is used to move up while pressing the up arrow button in keypad.

Note:resize and outline-offset are the most important properties of the CSS user interface. Resize property can have 3 common values:

Horizontal resize
Vertical resize
Both (horizontal & vertical) resize.

CSS3 Resize property

The CSS3 resize property specifies that whether an element should be resized by the user or not.

Horizontal Resize

Let's take an example to resize the width of a <div> element. (Horizontal resize)

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: horizontal;
    overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the width of a div element.</div>
</body>
</html>

Test it Now

Example2:

Vertical Resize

Let's take an example to resize the height of a <div> element. (Vertical resize)

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: vertical;
    overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize the height of a div element.</div>
</body>
</html>

Test it Now

Both (horizontal & vertical) resize

You can also resize the width and height of a <div> element.

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    border: 2px solid;
    padding: 20px;
    width: 300px;
    resize: both;
    overflow: auto;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the resize property.</p>
<div>This example specifies how to resize both the height and the width of this div element.</div>
</body>
</html>

Test it Now

CSS3 Outline Offset

The outline-offset property is used to add space between an outline and border of an element.

See this example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 20px;
    padding: 10px;
    width: 300px;
    height: 100px;
    border: 1px solid black;
    outline: 1px solid red;
    outline-offset: 10px;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer does not support the outline-offset property.</p>
<div>This example specifies an outline 10px outside the border edge.</div>
</body>
</html>

Test it Now