Home/Explore/

Resizable element

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
You can move the mouse over each squares located at the corners and the middle of sides to see the cursors which indicate the associated side can be resized.
<div style="
    /* Border */
    border: 1px dashed rgba(0, 0, 0, 0.3);

    /* Used to position the squares */
    position: relative;
">
    <!-- The content -->
    ...

    <!-- The top left square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: nwse-resize;

        /* Positioned at the top left corner */
        left: 0px;
        position: absolute;
        top: 0px;
        transform: translate(-50%, -50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The top square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: ns-resize;

        /* Positioned at the middle of top side */
        left: 50%;
        position: absolute;
        top: 0px;
        transform: translate(-50%, -50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The top right square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: nesw-resize;

        /* Positioned at the top right corner */
        position: absolute;
        right: 0px;
        top: 0px;
        transform: translate(50%, -50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The right square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: ew-resize;

        /* Positioned at the middle of right side */
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translate(50%, -50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The right bottom square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: nwse-resize;

        /* Positioned at the right bottom corner */
        bottom: 0px;
        position: absolute;
        right: 0px;
        transform: translate(50%, 50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The bottom square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: ns-resize;

        /* Positioned at the middle of bottom side */
        bottom: 0px;
        position: absolute;
        right: 50%;
        transform: translate(50%, 50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The bottom left square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: nesw-resize;

        /* Positioned at the bottom left corner */
        bottom: 0px;
        left: 0px;
        position: absolute;
        transform: translate(-50%, 50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>

    <!-- The left square -->
    <div style="
        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);

        /* Resize cursor */
        cursor: ew-resize;

        /* Positioned at the middle of left side */
        left: 0px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);

        /* Size */
        height: 12px;
        width: 12px;
    "/>
</div>
Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!