Dynamic Expand and Shrink of a div border with "SELECT" dropdown list

How can I achieve the border Expand/Shrink effect along with border when "SELECT&quo开发者_如何学编程t; type drop-down is clicked.

Something like this:

<div id="borderfx">&nbsp;</div>

<script type="text/javascript">
    function changeBorder() {
       document.getElementById('borderfx').style.borderStyle = this.options[this.selectedIndex].value;
    }
</script>

<select onchange="changeBorder()">
   <option value="solid">Solid</option>
   <option value="dashed">Dashed</option>
   <option value="dotted">Dotted</option>
</select>