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 all the rounded corners in Bootstrap...

That's a lot of CSS to chug through. Is there a global switch, or what would be the best way to find and replace all the rounded's?

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;