Can't get rounded corners on HTML form submit button?

Question

I have a submit button for a form in an HTML doc like so:

<form id = "submit" method="get" action="">
    <input type="submit" name="action" value="Download" id="dlbutton"/>
</form>

I tried to get rounded corners on it with CSS using the border-radius property, but they still remain sharp:

#dlbutton{
    background:#223445;
    color:#FFFFFF ;
    border: 1px solid #223445;
    border-radius: 18px 
    -moz-border-radius: 5px 
    display:inline-block;
    width: 20em;
    height: 5em;
    -webkit-font-smoothing: antialiased;
}

I have another button on another page that is style exactly the same and has rounded corners, except in the html the button is like :

<p><button class="clickable" id="clickable">Click me</button></p>

I'm using the latest Firefox. Thanks

Answer 1

You forgot semicolons (;). Change:

border-radius: 18px
-moz-border-radius: 5px 

to:

border-radius: 18px;
-moz-border-radius: 5px;

Also, I would recommend adding:

-webkit-border-radius: 5px;

for better cross-browser compatibility.