title: css resizeable div by dragging border not corner
body: <p>While codding my own JavaScript-based resizable panel I figured that there's a nice new CSS3 style property that does that trick in a much cleaner way. But the only problem I'm facing with this CSS based approach is that it can only be resized from the corner while it has to be resizable from the borders too not only the corner! The user might not even notice that it can be resized from the corner.</p>
  <p>Please don't disappoint me and tell me that there's no way to achieve this with the CSS resize property! I didn't find enough information on <a href="https://www.w3.org/TR/css-ui-4/#resize" rel="noreferrer">w3.org</a> but I'm still putting some hope in this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container{
    background-color: black;
    width: 400px;
    height: 400px;
  }
  
  .resizable{
    background-color: lightgray;
    width: 300px;
    height: 400px;
    resize: both;
    overflow: auto;
    min-width: 200px;
    min-height: 200px;
    max-width: 350px;
    max-height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container" &gt;
    &lt;div class="resizable"&gt;
      &lt;p&gt;Drag the bottom-right corner to resize me&lt;/p&gt;
      &lt;p&gt;However, Unfortunately, you can't resize me by dragging any of the right or bottom borders&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>