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?

If you can't modify what you currently have in place, I created a mod file that has all border-radii set to 0: mkamyszek.tumblr.com/post/61791361233/… — Mark Kamyszek, Commented Sep 30, 2013 at 13:54
ina, did my answer worked out for you? would you mark it as correct? — BrunoS, Commented Feb 15, 2014 at 15:06

kub1x · Accepted Answer · 2017-01-31 16:34:45Z

355

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;

edited Jan 31, 2017 at 16:34

kub1x

3,41239 silver badges41 bronze badges

answered Mar 7, 2013 at 15:45

BrunoS

3,6941 gold badge17 silver badges10 bronze badges

2

This is a really nice solution if you are trying to customize bootstrap without touching the core files. Great answer!
– marty
Commented Dec 26, 2013 at 20:06
4

Heck yeah, quick n dirty!
– programmer
Commented Jul 7, 2014 at 0:18
1

I had used this * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } And it is working perfectly for Bootstrap 3.2. Thanx for the fix man!
– Todor Todorov
Commented Feb 7, 2015 at 9:30
1

This solution doesn't work for bootstrap styled <select> inputs. Probably due to the use of -webkit-appearance: menulist.
– johnsorrentino
Commented Jul 16, 2015 at 18:36
1

$enable-rounded: false; also applies to bootstrap 5 sass FYI
– Adrian Tollis
Commented May 28, 2021 at 5:25

| Show 4 more comments

SLaks · Accepted Answer · 2012-03-16 17:57:32Z

25

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

answered Mar 16, 2012 at 17:57

SLaks

882k178 gold badges1.9k silver badges2k bronze badges

This is the perhaps the best solution as far as efficiency with mastering Bootstrap CSS processing.
– klewis
Commented Mar 9, 2016 at 19:52

Add a comment |

adamwong246 · Accepted Answer · 2013-10-19 21:19:02Z

21

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

edited Oct 19, 2013 at 21:19

answered Mar 13, 2013 at 16:56

adamwong246

7959 silver badges15 bronze badges

Add a comment |

yves amsellem · Accepted Answer · 2012-10-20 17:41:40Z

19

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

answered Oct 20, 2012 at 17:41

yves amsellem

7,1846 gold badges45 silver badges69 bronze badges

1

It will impact only on buttons and wherever you have added .btn
– zVictor
Commented Mar 23, 2013 at 1:33

Add a comment |

ymakux · Accepted Answer · 2017-01-09 11:30:50Z

18

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

edited Jan 9, 2017 at 11:30

answered Sep 5, 2015 at 16:33

ymakux

3,4652 gold badges35 silver badges43 bronze badges

Add a comment |

Ergec · Accepted Answer · 2020-03-06 08:55:28Z

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>

edigu · Accepted Answer · 2016-09-27 18:42:54Z

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

you rock ;) This should be the accepted answer once Bootstrap 4 goes viral... sorry, public. It's well hidden down here for those already using it in alpha. — kub1x, Commented Jan 31, 2017 at 14:31

Blackbam · Accepted Answer · 2019-10-02 14:02:31Z

6

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;

answered Oct 2, 2019 at 14:02

Blackbam

18.9k30 gold badges104 silver badges159 bronze badges

1

Exactly. Put these declarations before e.g. @import "../node_modules/bootstrap/scss/bootstrap"; and bootstrap will not override them, since they're declared with the !default keyword in bootstrap-source.
– Jeppe
Commented Apr 6, 2020 at 16:43

Add a comment |

tomruss · Accepted Answer · 2012-12-09 16:14:37Z

5

.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
}

answered Dec 9, 2012 at 16:14

tomruss

2182 silver badges8 bronze badges

1

I usually keep 'px' so that if I have to change the value I don't have to type 'px' again.
– nkkollaw
Commented Nov 11, 2013 at 11:20
1

but the extra bytes of data
– Anthony Shaw
Commented Mar 27, 2014 at 14:06

Add a comment |

cwd · Accepted Answer · 2014-05-29 16:13:16Z

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

Smith · Accepted Answer · 2015-01-05 19:45:20Z

4

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

edited Jan 5, 2015 at 19:45

answered Dec 3, 2014 at 13:03

Smith

5,88117 gold badges109 silver badges163 bronze badges

3

@brunos was using LESS
– afaolek
Commented Jan 14, 2015 at 1:48

Add a comment |

Zbigniew Ledwoń · Accepted Answer · 2015-09-15 22:52:29Z

4

There is a very easy way to customize Bootstrap:

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

answered Sep 15, 2015 at 22:52

Zbigniew Ledwoń

6821 gold badge6 silver badges19 bronze badges

Add a comment |

Rajesh Maradana · Accepted Answer · 2020-05-10 17:31:57Z

3

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>

answered May 10, 2020 at 17:31

Rajesh Maradana

312 bronze badges

which version of bootstrap
– ina
Commented May 11, 2020 at 0:10
This I tried in Bootsrap 4 and 'rounded-0' removes the rounded corner on an input box
– omitobi
Commented Sep 26, 2020 at 10:12

Add a comment |

joce · Accepted Answer · 2014-04-25 20:29:45Z

2

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

edited Apr 25, 2014 at 20:29

joce

9,80419 gold badges57 silver badges75 bronze badges

answered Apr 25, 2014 at 20:13

Nadia

291 bronze badge

Add a comment |

Florian Feldhaus · Accepted Answer · 2013-08-04 10:18:19Z

1

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.

answered Aug 4, 2013 at 10:18

Florian Feldhaus

5,7873 gold badges39 silver badges47 bronze badges

1

Problem with Flatstrap is that they don't have SCSS support for v3 yet :(
– HP.
Commented Nov 28, 2013 at 6:04

Add a comment |

Ruberandinda Patience · Accepted Answer · 2017-09-05 19:08:10Z

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

Collectives™ on Stack Overflow

Getting rid of all the rounded corners in Twitter Bootstrap

16 Answers 16

With SCSS:

With LESS:

Not the answer you're looking for? Browse other questions tagged
css
twitter-bootstrap
twitter-bootstrap-2
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

16 Answers 16

With SCSS:

With LESS:

Not the answer you're looking for? Browse other questions tagged csstwitter-bootstraptwitter-bootstrap-2 or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
twitter-bootstrap
twitter-bootstrap-2
or ask your own question.