How do I set custom resize handles with jQuery UI?

The solution is not mine, but it shows exactly what the problem and the solution is:

<p><a href="http://bugs.jqueryui.com/ticket/4310">jQuery UI #4310</a> - Custom resizable handles do not work unless the ui-resizable-xy and ui-resizable-handle classes are added.</p>

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>


<div class="container">
    <div class="border bottom_right ui-resizable-se ui-resizable-handle"></div>
</div>

<script>
    $(function() {
        $('.container').resizable({
           handles: { se: '.bottom_right' } 
        });
    });
</script>

For me it works! :)

http://jsfiddle.net/tj_vantoll/pFfKz/

Your custom handle syntax is wrong. This works for me:

   var reposition = '';
   $(function() {
    $( ".resizable" ).resizable({
     containment: "#viewPage",
     handles: { 'e': '.ui-resizable-e', 's': '.ui-resizable-s', 'se': '.ui-resizable-se'},
     resize: function(event, ui){
       reposition = ui.position;
     }
    });
   });