Propiedad resize de CSS

La propiedad resize de CSS permite al usuario redimensionar un elemento en pantalla. Para ello aparecerá un selector en la esquina inferior derecha que arrastrándolo modificará su tamaño.

Esta función es algo que se utiliza tradicionalmente en el diseño web para las áreas de texto en los formularios, ya que permite una mayor comodidad a la hora de redactar textos.

Los valores que esta propiedad permite son: horizontal, vertical, both, initial, inherit y none. Dependerá de nosotros aplicar una u otra dependiendo del caso.

Valor resize: horizontal

Habilitará que el elemento se pueda extender horizontalmente.

.elemento {
    resize: horizontal;
}

Valor resize: vertical

Permitirá al usuario ajustar el alto del elemento a criterio del usuario.

.elemento {
    resize: vertical;
}

Valor resize: both

Se trata de una combinación de las dos anteriores. Permite al usuario redimensionar el elemento tanto en vertical como en horizontal.

.elemento {
    resize: both;
}

Valor resize: initial

Restablece la propiedad a su valor inicial. Esto es muy útil cuando anidamos elementos y queremos que la propiedad no se vea afectada por los valores del padre.

.elemento {
    resize: initial;
}

Valor resize: inherit

Justo al contrario que el valor anterior, con inherit permitimos que el elemento herede el valor de su padre.

.elemento {
    resize: inherit;
}

Valor resize: none

Nos permitirá que el elemento no se pueda ajustar en modo alguno.

.elemento {
    resize: none;
}