How to set different cursors for an element and it's border

css, html, javascript

Solution

It's a lot's of HTML/CSS code, but something like that will help you:

.container {
  position: relative;
}
.crop {
  position: absolute;
  top: 10px;
  left: 100px;
  width: 100px;
  height: 100px;
  transition: all 0.25s;
  cursor: move;
}

.crop .crop-line {
  position: absolute;
  transition: all 0.25s;
}
.crop:hover .crop-line {
  border-color: rgba(123,53,132,1);
}
.crop .crop-top-line {
  top: 0;
  left: 0;
  right: 0;
  height: 5px; /* 5px for the mouse cursor update size */
  border-top: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
  cursor: n-resize;
}
.crop .crop-bottom-line {
  bottom: 0;
  left: 0;
  right: 0;
  height: 5px; /* 5px for the mouse cursor update size */
  border-bottom: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
  cursor: s-resize;
}
.crop .crop-left-line {
  top: 0;
  left: 0;
  bottom: 0;
  width: 5px; /* 5px for the mouse cursor update size */
  border-left: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
  cursor: w-resize;
}
.crop .crop-right-line {
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px; /* 5px for the mouse cursor update size */
  border-right: 1px solid rgba(204,31,48,1); /* 1px for the "border" size */
  cursor: e-resize;
}
.crop .crop-corner {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  border: 1px solid #808080;
  background: #FFF;
  opacity: 0;
  transition: all 0.25s;
}
.crop .crop-top-left-corner {
  top: -3px;
  left: -3px;
  cursor: nw-resize;
}
.crop .crop-top-right-corner {
  top: -3px;
  right: -3px;
  cursor: ne-resize;
}
.crop .crop-bottom-left-corner {
  bottom: -3px;
  left: -3px;
  cursor: sw-resize;
}
.crop .crop-bottom-right-corner {
  bottom: -3px;
  right: -3px;
  cursor: se-resize;
}
.crop:hover .crop-corner {
  opacity: 1;
}

 <div class="container">
  <div class="crop">
   <div class="crop-line crop-top-line"></div>
   <div class="crop-line crop-right-line"></div>
   <div class="crop-line crop-bottom-line"></div>
   <div class="crop-line crop-left-line"></div>

   <div class="crop-corner crop-top-left-corner"></div>
   <div class="crop-corner crop-top-right-corner"></div>
   <div class="crop-corner crop-bottom-right-corner"></div>
   <div class="crop-corner crop-bottom-left-corner"></div>
  </div>
 </div>

Problem

Original source