title: Portable round corners on html button
body: <p>I have a simple html button that I wrap into a <code>div</code>. I know that such buttons may render differently on different browsers.</p>
  
  <pre><code>&lt;div id="but_begin"&gt;&lt;button type="button" id="but2_begin"&gt;Go&lt;/button&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I have set the following CSS on the button (using JQuery):</p>
  
  <pre><code>$("#but2_begin").css({
      backgroundColor: "yellow",
      width:50
  });
  </code></pre>
  
  <p>and it renders as follows:</p>
  
  <p><img src="https://i.stack.imgur.com/D21KZ.png" alt="enter image description here"></p>
  
  <p>I would like to get rid of the shadows around it and make the corners round. Now, I am getting a little scared when I read all the info available on the net about button layout and round corners. It does not seem to converge at all.</p>
  
  <p><strong>My question:</strong> how can I set round corners on a HTML button in a portable way? Is this possible with CSS only? Or should I use a library? Or should I use a different HTML tag or method?</p>