CSS Resizing

 

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

​

The following example lets the user resize only the width of a <div> 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.

 

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

​