---
title: CSS User Interface
description: "> ## CSS User Interface > > > > In this chapter you will learn about the following CSS user interface properties: > > > > - `resize` > - `outline-offset` ## rowser Support The numbers in the table specify…"
url: "https://apprentice.mn/docs/css-user-interface/"
updated: "2021-05-12"
category: CSS
---

# CSS User Interface

> ## CSS User Interface
>
>
>
> In this chapter you will learn about the following CSS user interface properties:
>
>
>
> - `resize`
> - `outline-offset`

## rowser Support

The numbers in the table specify the first browser version that fully supports the property.

| Property | Chrome | Internet explorer | Mozila Firefox | Safari | Opera |
| --- | --- | --- | --- | --- | --- |
| resize | 4.0 | 79.0 | 5.0 | 4.0 | 15.0 |
| outline-offset | 4.0 | 15.0 | 5.0 | 4.0 | 9.5 |

---

##  

## CSS Resizing

The `resize` property specifies if (and how) an element should be resizable by the user.

  

Let the user resize only the width of this div element.
 to resize: Click and drag the bottom right corner of this div element.

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

### Example

     `div {
  resize: horizontal;
  overflow: auto;
}`

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

### Example

              `div {
  resize: vertical;
  overflow: auto;
}`

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

### Example

      `div {
  resize: both;
  overflow: auto;
}`

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

### Example

      `textarea {
  resize: none;
}`

## CSS Outline Offset

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

     This div has an outline 15px outside the border edge.

**Note:** Outline differs from borders! Unlike border, the outline is drawn outside the element’s border, and may overlap other content. Also, the outline is NOT a part of the element’s dimensions; the element’s total width and height is not affected by the width of the outline.

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;
}`

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

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-user-interface%2F&linkname=CSS%20User%20Interface)[https://www.addtoany.com/share](https://www.addtoany.com/share)