BUG

HTML

<div id="resize-me" style="position:absolute;left:1px;right:1px;margin:auto;width:50%;height:50%;background-color:yellow;">RESIZE ME
</div>

CSS

.ui-resizable-handle{
    background-color:blue;
}
.ui-resizable-w{
    width:8px;
    position:absolute;
    float:left;
    top:0px;
    bottom:0px;
    left:-8px;
    cursor:w-resize;
}
.ui-resizable-e{
    width:8px;
    position:absolute;
    top:0px;
    bottom:0px;
    right:-8px;
    cursor:e-resize;
}
.ui-resizable-n{
    height:8px;
    position:absolute;
    top:-8px;
    left:0px;
    right:0px;
    cursor:n-resize;
}
.ui-resizable-s{
    height:8px;
    position:absolute;
    bottom:-8px;
    left:0px;
    right:0px;
    cursor:s-resize;
}
.ui-resizable-ne{
    height:8px;
    width:8px;

    position:absolute;
    top:-8px;
    right:-8px;
    cursor:ne-resize;
}
.ui-resizable-sw{
    height:8px;
    width:8px;
    position:absolute;
    bottom:-8px;
    left:-8px;
    cursor:sw-resize;
}
.ui-resizable-nw{
    height:8px;
    width:8px;
    position:absolute;
    top:-8px;
    left:-8px;
    cursor:nw-resize;
}
.ui-resizable-se{
    height:8px;
    width:8px;
    position:absolute;
    bottom:-8px;
    right:-8px;
    cursor:se-resize;
}

JavaScript

$(function(){
    $("#resize-me").resizable({handles:"all"});

});