Geek asks and answers

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

I have a submit button in an HTML document like this:

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

I tried to put rounded corners on it 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 has the same style and has rounded corners, except for the html button:

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

I am using the latest Firefox. Thanks

+3
source share
3 answers

You forgot the semicolons ( ;). Change:

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

at

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

In addition, I would recommend adding:

-webkit-border-radius: 5px;

for better compatibility between browsers.

+9
source

I hope these links help you, please check them out:

:

CSS:

// FIRST STYLE THE BUTTON
input#bigbutton {
width:500px;
background: #3e9cbf; // the colour of the button
padding: 8px 14px 10px; // apply some padding inside the button
border:1px solid #3e9cbf; // required or the default border for the browser will appear
cursor:pointer; // forces the cursor to change to a hand when the button is hovered
// Style the text
font-size:1.5em;
font-family:Oswald, sans-serif; 
letter-spacing:.1em;
text-shadow: 0 -1px 0px rgba(0, 0, 0, 0.3); // give the text a shadow 
color: #fff;
/*use box-shadow to give the button some depth - see cssdemos.tupence.co.uk/box-shadow.htm#demo7 for more info on this technique*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 5px 0px 0px #205c73, 0px 10px 5px #999;
/*give the corners a small curve*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
// SET THE BUTTON HOVER AND FOCUS STATES
input#bigbutton:hover, input#bigbutton:focus {
color:#dfe7ea;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #3e9cbf, 0px 2px 0px 0px #205c73, 0px 2px 5px #999;
}

HTML:

<input id="bigbutton" type="submit" value="Big Button That Needs Clicking" />
0

, , , :

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

So you can use them in your code as follows:

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

More articles:


All Articles