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;

Answer 2

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

Answer 3

If you are using Bootstrap version < 3...

With sass/scss

$baseBorderRadius: 0;

With less

@baseBorderRadius: 0;

You will need to set this variable before importing the bootstrap. This will affect all wells and navbars.

Update

If you are using Bootstrap 3 baseBorderRadius should be border-radius-base

Answer 4

If you want to avoid recompiling the all thing, just add .btn {border-radius: 0;} to your CSS.

Answer 5

code,
kbd,
pre,
.img-rounded,
.img-thumbnail,
.img-circle,
.form-control,
.btn,
.btn-link,
.dropdown-menu,
.list-group-item,
.input-group-addon,
.input-group-btn,
.nav-tabs a,
.nav-pills a,
.navbar,
.navbar-toggle,
.icon-bar,
.breadcrumb,
.pagination,
.pager *,
.label,
.badge,
.jumbotron,
.thumbnail,
.alert,
.progress,
.panel,
.well,
.modal-content,
.tooltip-inner,
.popover,
.popover-title,
.carousel-indicators li {
    border-radius:0 !important;
}

Answer 6

This question is pretty old however it is highly visible on search engines even in Bootstrap 4 related searches. I think it worths to add an answer for disabling the rounded corners, BS4 way.

In the _variables.scss there are several global modifiers exists to quickly change the stuff such as enabling or disabling flex gird system, rounded corners, gradients etc. :

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

Rounded corners are enabled by default.

If you prefer compiling the Bootstrap 4 using Sass and your very own _custom.scss like me (or using official customizer), overriding the related variable is enough:

$enable-rounded : false

Answer 7

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

Or define a mixin and include it wherever you want an unrounded button.

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

Answer 8

When using Bootstrap >= 3.0 source files (SASS or LESS) you don't have to get rid of the rounded corners on everything if there is just one element that is bugging you, for example, to just get rid of the rounded corners on the navbar, use:

With SCSS:

$navbar-border-radius: 0;

With LESS:

@navbar-border-radius: 0;

However, if you do want to get rid of the rounded corners on everything, you can do what @adamwong246 mentioned and use:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Those two settings are the "root" settings from which the other settings like navbar-border-radius will inherit from unless other values are specified.

For a list all variables check out the variables.less or variables.scss

Answer 9

Bootstrap has it's own classes for borders including .rounded-0 to get rid of rounded corners on any element including buttons

https://getbootstrap.com/docs/4.4/utilities/borders/#border-radius

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="btn btn-primary">Regular Rounded Corners</a>
<a class="btn btn-primary rounded-pill">Pill Corners</a>
<a class="btn btn-primary rounded-0">Square Corners</a>

Answer 10

The code posted above by @BrunoS did not work for me,

* {
  .border-radius(0) !important;
}

what i used was

* {
  border-radius: 0 !important;
}

I hope this helps someone

Answer 11

There is a very easy way to customize Bootstrap:

1. Just go to http://getbootstrap.com/customize/
2. Find all "radius" and modify them as you wish.
3. Click "Compile and Download" and enjoy your own version of Bootstrap.

Answer 12

With SASS Bootstrap - if you are compiling Bootstrap yourself - you can set all border radius (or more specific) simply to zero:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

Answer 13

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 14

if you are using bootstrap you can just use the bootstrap class="rounded-0" to make the border with the sharp edges with no rounded corners <button class="btn btn-info rounded-0"">Generate</button></span>

Answer 15

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.

Answer 16

I have create another css file and add the following code Not all element are included

/* Flatten das boostrap */
.well, .navbar-inner, .popover, .btn, .tooltip, input, select, textarea, pre, .progress, .modal, .add-on, .alert, .table-bordered, .nav>.active>a, .dropdown-menu, .tooltip-inner, .badge, .label, .img-polaroid, .panel {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
    border-collapse: collapse !important;
    background-image: none !important;
}