resize

resize: both;

resize: horizontal;

resize: vertical;

resize: none;

<section class="default-example" id="default-example">
  <div id="example-element">Try resizing this element.</div>
</section>

#example-element {
  background: linear-gradient(135deg, #0ff 0%, #0ff 94%, #fff 95%);
  border: 3px solid #c5c5c5;
  overflow: auto;
  width: 250px;
  height: 250px;
  font-weight: bold;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

/* キーワード値 */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* グローバル値 */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

<textarea>いくらかテキストを入力してください。</textarea>

textarea {
  resize: none; /* リサイズを無効化 */
}

<div class="resizable">
  <p class="resizable">
    この要素では CSS の `resize` プロパティが `both` に設定されているため、この段落はすべてリサイズ可能です。
  </p>
</div>

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}
div {
  height: 300px;
  width: 300px;
}
p {
  height: 200px;
  width: 200px;
}