csstwitter-bootstraptwitter-bootstrap-2

Getting rid of all the rounded corners in Twitter Bootstrap


In Twitter Bootstrap 2.0, I want to make a global modification for a very boxy-not-round site: To get rid of all the rounded corners in Bootstrap.

Is there a global switch, or what would be the best way to find and replace all the rounded corners?


Solution

  • 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;