--- title: resize slug: Web/CSS/resize tags: - CSS - CSS Властивість - Зміна розміру - Розмір translation_of: Web/CSS/resize ---
{{CSSRef}}

Зведення

The resize CSS property lets you control the resizability of an element.

{{cssinfo}}

Синтаксис

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* Global values */
resize: inherit;
resize: initial;
resize: unset;

Значення

none
The element offers no user-controllable method for resizing the element.
both
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
horizontal
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
vertical
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
block {{experimental_inline}}
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
inline {{experimental_inline}}
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
Note: resize does not apply to blocks for which the {{cssxref("overflow")}} property is set to visible.

Formal syntax

{{csssyntax}}

Examples

Disabling resizability of textareas

CSS

By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:

textarea.example {
  resize: none; /* disables resizability */
}

HTML

<textarea class="example">Type some text here.</textarea>

Result

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):

CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

HTML

<div class="resizable">
  <p class="resizable">
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

Specifications

Specification Status Comment
{{SpecName('CSS Logical Properties', '#resize', 'resize')}} {{Spec2('CSS Logical Properties')}} Adds the values block and inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}} {{Spec2('CSS3 Basic UI')}} Initial definition

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support (on {{HTMLElement("textarea")}}) 1.0 {{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}} {{CompatNo}} 12.1 3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible) 4.0 {{CompatGeckoDesktop("5.0")}}[1] {{CompatNo}} 15 4.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support (on {{HTMLElement("textarea")}}) {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible) {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}

[1] resize doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})

See also