css resizeable div by dragging border not corner

Question

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.

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 w3.org but I'm still putting some hope in this.

.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;
}

<div class="container" >
  <div class="resizable">
    <p>Drag the bottom-right corner to resize me</p>
    <p>However, Unfortunately, you can't resize me by dragging any of the right or bottom borders</p>
  </div>
</div>

Answer 1

Seems like it's totally up to browser creators how the resize mechanism will be implemented and the only way to achieve desired and normalized behaviour would be with JS (e.g. https://jqueryui.com/resizable/)

Answer 2

If you need something like this:

DEMO

HTML:

 function makeResizableDiv(div) {
      const element = document.querySelector(div);
      const resizers = document.querySelectorAll(div + ' .resizer')
      const minimum_size = 20;
      let original_width = 0;
      let original_height = 0;
      let original_x = 0;
      let original_y = 0;
      let original_mouse_x = 0;
      let original_mouse_y = 0;
      for (let i = 0;i < resizers.length; i++) {
        const currentResizer = resizers[i];
        currentResizer.addEventListener('mousedown', function(e) {
          e.preventDefault()
          original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
          original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
          original_x = element.getBoundingClientRect().left;
          original_y = element.getBoundingClientRect().top;
          original_mouse_x = e.pageX;
          original_mouse_y = e.pageY;
          window.addEventListener('mousemove', resize)
          window.addEventListener('mouseup', stopResize)
        })
        
        function resize(e) {
          if (currentResizer.classList.contains('bottom-right')) {
            const width = original_width + (e.pageX - original_mouse_x);
            const height = original_height + (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
            }
          }
          else if (currentResizer.classList.contains('bottom-left')) {
            const height = original_height + (e.pageY - original_mouse_y)
            const width = original_width - (e.pageX - original_mouse_x)
            if (height > minimum_size) {
              element.style.height = height + 'px'
            }
            if (width > minimum_size) {
              element.style.width = width + 'px'
              element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
            }
          }
          else if (currentResizer.classList.contains('top-right')) {
            const width = original_width + (e.pageX - original_mouse_x)
            const height = original_height - (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
              element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
            }
          }
          else {
            const width = original_width - (e.pageX - original_mouse_x)
            const height = original_height - (e.pageY - original_mouse_y)
            if (width > minimum_size) {
              element.style.width = width + 'px'
              element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
            }
            if (height > minimum_size) {
              element.style.height = height + 'px'
              element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
            }
          }
        }
        
        function stopResize() {
          window.removeEventListener('mousemove', resize)
        }
      }
    }
    
    makeResizableDiv('.resizable')

  body,
    html {
      background: black;
    }
    .resizable {
      background: white;
      width: 100px;
      height: 100px;
      position: absolute;
      top: 100px;
      left: 100px;
    }
    
    .resizable .resizers{
      width: 100%;
      height: 100%;
      border: 3px solid #4286f4;
      box-sizing: border-box;
    }
    
    .resizable .resizers .resizer{
      width: 10px;
      height: 10px;
      border-radius: 50%; /*magic to turn square into circle*/
      background: white;
      border: 3px solid #4286f4;
      position: absolute;
    }
    
    .resizable .resizers .resizer.top-left {
      left: -5px;
      top: -5px;
      cursor: nwse-resize; /*resizer cursor*/
    }
    .resizable .resizers .resizer.top-right {
      right: -5px;
      top: -5px;
      cursor: nesw-resize;
    }
    .resizable .resizers .resizer.bottom-left {
      left: -5px;
      bottom: -5px;
      cursor: nesw-resize;
    }
    .resizable .resizers .resizer.bottom-right {
      right: -5px;
      bottom: -5px;
      cursor: nwse-resize;
    }

 <div class='resizable'>
      <div class='resizers'>
        <div class='resizer top-left'></div>
        <div class='resizer top-right'></div>
        <div class='resizer bottom-left'></div>
        <div class='resizer bottom-right'></div>
      </div>
    </div>

1:enter link description here