gr4nola gr4nola - 1 year ago 132
CSS Question

Bootstrap form input edges wont change from rounded to square

I am trying to make the corners for my form input square instead of rounded in bootstrap but am having no luck. The CSS worked for the button, but the input form is still rounded. What am I doing wrong here?

<form class="navbar-form pull-right">

<div class="form-group form-group-sm">

<input type="email" class="form-control input" id="email" name="email" placeholder="">

<input type="submit" class="btn btn-sm" name="submit" value="Submit" id="submit"/>



.form-control {
border-radius: 0;

Answer Source

Your CSS rule isn't specific enough to override the Bootstrap CSS. Instead, just use :

#email {
    border-radius: 0;

bootply example

To learn more about CSS specificity, see

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download