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

Question

How to set different cursors for an element and it's border ? PSEUDO elements ? is there a way ? Note: Yes it can be done via JS, i was looking for a way using pure CSS with a single element.

Answer 1

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>

Answer 2

Since the cursor property affects the shape of the pointer (oddly called “cursor” in CSS) in the element’s entire area, including border, there is no direct way to do this.

You could use JavaScript to determine the content area of the element and then modify the DOM so that an additional element for the content is introduced, and then you can set different “cursor” for the inner element and the outer element.

However, it is normally simpler to do such things in markup, and you won’t then need JavaScript at all for this:

<div id=foo><div id=foo-content>...</div></div>

Now you can set a border on #foo and set cursor on both elements. The “cursor” set on #foo will then be applied to the border only.

jsfiddle