Something in my CSS block isn't being followed

[jPaulB]

Hi Everybody,

I have the following HTML form-component. The last input-control is a button type, class id = "submitBtn1".
The issue I have is with the display of the submitBtn1. The CSS contains a border-radius=5px; so there should be a curve on all four corners.
However, you can see both the left-top and left-bottom has no curvature.

<form id="regForm" method="POST" action="php/register.php">
    <div class = "input-group">
        <input type="email" class="inputBox" id="EM1" name="email" tabindex="1" autocomplete="off" spellcheck="false" placeholder="Enter your eMail Address">
        <input type="password" class="inputBox" id="PW1" name="password" tabindex="2" autocomplete="off" spellcheck="false" placeholder="Enter your Password">
        <input type="password" class="inputBox" id="PW2" tabindex="3" autocomplete="off" spellcheck="false" placeholder="Confirm your Password">
        <input type="submit" class="submitBtn1" id="Register" value="Register" tabindex="4" >
    </div>
</form>

.submitBtn1 {
    height: 27px;
    width: 90px;
   display: block; /* Turns it into a block element */
   margin: 0 auto; /* Forces equal left and right margins */
    background-color: #1D8750;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    border-radius: 5px;
    color: #FFFFFF;
    cursor: pointer;
   font-family: "Cabin SemiBold", serif;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

There are two things I want to fix:

• I want all four corners of submitBtn1 to be curved.
• I would like to center, horizontally and Vertically , in the middle of the button.

Could someone show me where I am going wrong?

 

[c1lonewolf]

try removing the button height.

.submitBtn1 {
    display: block; /* Turns it into a block element */
    width: 90px;
    text-align: center;
    margin: 0 auto; /* Forces equal left and right margins */
    cursor: pointer;
    font-family: "Cabin SemiBold", serif;
    font-size: 19px;
    font-weight: 600;
    background-color: #1D8750;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    border-radius: 5px;
    color: #FFFFFF;
}

realigning your css elements now will make things a lot easier later on when you're making color schemes, skins and themes.