Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    resize

    Summary

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

    • Initial value none
    • Applies to elements with overflow other than visible
    • Inherited no
    • Media visual
    • Computed value as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    resize: none;
    resize: both;
    resize: horizontal;
    resize: vertical;
    
    resize: inherit;
    

    Values

    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.
    Note: resize does not apply to blocks for which the overflow property is set to visible.

    Formal syntax

    none | both | horizontal | vertical

    Examples

    Disabling resizability of textareas

    By default, <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 */
    }
    

    Using resize with arbitrary elements

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

    <div style="resize:both; overflow:scroll; width:300px; height:300px; border:1px solid black">
      <p style="resize:both; overflow:scroll; width:200px; height:200px; border:1px solid black">
        This paragraph is resizable, because the CSS resize property is set to 'both' on this
        element.
      </p>
    </div>
    

    arbitrary.png

    View the live example

    Specifications

    Specification Status Comment
    CSS Basic User Interface Module Level 3
    The definition of 'resize' in that specification.
    Working Draft  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support (on <textarea>) 1.0 4.0 (2.0)-moz Not supported Not supported 3.0 (522)
    On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) 4.0 5.0 (5.0) Not supported Not supported 4.0
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support (on <textarea>) ? ? ? ? ?
    On any block-level and replaced element, table cell, and inline block element (unless overflow is visible) ? ? ? ? ?

    See also

    Document Tags and Contributors

    Last updated by: tregagnon,
    Hide Sidebar