diff --git a/public/css/app.css b/public/css/app.css
index 5cdc1eb..afa4406 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -45,7 +45,7 @@ input[type='radio']           { border: 0; }
 .configuration .section label     { display: inline-block; width: 112px; }
 
 .configuration .size,
-.configuration .border_width      { width: 28px; text-align: right; }
+.configuration .border_width      { width: 38px; text-align: right; }
 
 .configuration .color             { width: 65px; text-align: center }
 
diff --git a/public/index.html b/public/index.html
index 413f523..b6c62b3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -30,21 +30,21 @@ <h2>Arrow configuration</h2>
             <ol class='section'>
               <li>
                 <label for='size'>Size</label>
-                <input class='size' id='size' /><span class='unit'>px</span>
+                <input type="number" class='size' id='size' /><span class='unit'>px</span>
               </li>
               <li>
                 <label for='color'>Color</label>
-                <input class='base_color color {hash:true,caps:false}' id='color' />
+                <input type="color" class='base_color color {hash:true,caps:false}' id='color' />
               </li>
             </ol>
             <ol class='section'>
               <li>
                 <label for='border_width'>Border width</label>
-                <input class='border_width' id='border_width' /><span class='unit'>px</span>
+                <input type="number" class='border_width' id='border_width' /><span class='unit'>px</span>
               </li>
               <li>
                 <label for='border_color'>Border color</label>
-                <input class='border_color color {hash:true,caps:false}' id='border_color' />
+                <input type="color" class='border_color color {hash:true,caps:false}' id='border_color' />
               </li>
             </ol>
           </div>