Getting rid of all the rounded corners in Twitter Bootstrap

Question

I love Twitter Bootstrap 2.0 - I love how it\'s such a complete library... but I want to make a global modification for a very boxy-not-round site, which is to get rid of al

Answer 1

I set all element's border-radius to "0" like this:

* {
  border-radius: 0 !important;
}

As I'm sure I don't want to overwrite this later I just use !important.

If you are not compiling your less files just do:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

In bootstrap 3 if you are compiling it you can now set radius in the variables.less file:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

In bootstrap 4 if you are compiling it you can disable radius alltogether in the _custom.scss file:

$enable-rounded:   false;

Answer 2

Download the source .less files and make the .border-radius() mixin blank.

Answer 3

Or you could add this to the html of the element you want to remove the border radius from (this way you wouldn't be removing it from all buttons / elements):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

Answer 4

You may also want to have a look at FlatStrap. It provides a Metro-Style replacement for the Bootstrap CSS without rounded corners, gradients and drop shadows.