Features like resizing elements, outlines, and box-sizing are a part of the user interface features facilitated by CSS. Some common properties of the CSS3 user interface are listed below.
| Values | Uses |
| appearance | Used to make elements as user interface elements. |
| box-sizing | Used to fix elements in the area in a clear way. |
| icon | Used to facilitate the icon on the area. |
| resize | Used to resize elements on the area. |
| outline-offset | Used to add space between the outline and the border of an element. |
| nav-down | Used while pressing the down arrow button on the keyboard to move down. |
| nav-left | Used while pressing the left arrow button on the keyboard to move left. |
| nav-right | Used while pressing the right arrow button on the keyboard to move right. |
| nav-up | Used while pressing the up arrow button on the keyboard to move up. |
CSS3 Resize property:
CSS Resize and CSS Outline-offset are the two most important properties of the CSS user interface. To specify the resizing of an element, the CSS3 resize property is used. It can take either of the three values:
- Horizontal resize
- Vertical resize
- Both (horizontal & vertical) resize.
Horizontal Resize:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid;
padding: 10px;
width: 200px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>Click and drag the bottom right corner of the below div element.</h1>
<div>
<p>Hello World!!</p>
</div>
</body>
</html>
Explanation:
In the above example, we are resizing the width of the <div> element.
Vertical Resize:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
padding: 10px;
width: 200px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<p>Click and drag the bottom right corner of the below div element.</p>
<div>
<p>Hello World!!</p>
</div>
</body>
</html>
Explanation:
In the above example, we are resizing the height of the <div> element.
Both horizontal & vertical resize:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 5px solid red;
padding: 10px;
width: 200px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<p>Click and drag the bottom right corner of the below div element.</p>
<div>
<p>Hello World!!</p>
</div>
</body>
</html>
Explanation:
In the above example, we are resizing both the width and the height of the <div> element.
CSS3 Outline Offset:
To add space between the outline and the border of an element, the CSS3 Outline Offset property is used.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
margin: 20px;
border: 2px solid red;
outline: 5px solid yellow;
outline-offset: 10px;
text-align: center;
}
div.ex2 {
margin: 20px;
border: 2px solid yellow;
outline: 5px dashed red;
outline-offset: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>Example:</h1>
<div class="ex1">Solid outline Solid border.</div>
<br>
<div class="ex2">Dashed outline Solid border.</div>
</body>
</html>
Explanation:
In the above example, we are adding space between the outline and the border of the <div> element.
Supporting Browsers:
| Property | Chrome | IE | Firefox | Opera | Safari |
| Resize | 4 | NA | 5.04.0 -moz- | 15 | 4 |
| Outline-offset | 4 | NA | 5.04.0 -moz- | 9.5 | 4 |