Getting rid of all the rounded corners in Twitter Bootstrap

F

16

188

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?

Fatherland answered 16/3, 2012 at 17:54 Comment(3)

Are you looking to remove all or just some rounded corners? – Whipsaw 18/3, 2012 at 14:53

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/… – Laskowski 30/9, 2013 at 13:54

ina, did my answer worked out for you? would you mark it as correct? – Eft 15/2, 2014 at 15:6

E

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;

Eft answered 7/3, 2013 at 15:45 Comment(9)

This is a really nice solution if you are trying to customize bootstrap without touching the core files. Great answer! – Alfons 26/12, 2013 at 20:6

Heck yeah, quick n dirty! – Taxi 7/7, 2014 at 0:18

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! – Keos 7/2, 2015 at 9:30

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

This a probably a good solution, but not the best. This will generate large number of redundant CSS for each element unnecessarily. I think this is one of the best solution provided by @ymakux. You can try this – Pew 31/10, 2015 at 17:53

@John did you find a solution to reset the border-radius for select inputs? – Cyzicus 27/1, 2016 at 23:43

@xgrioux, for <select> specifically I couldn't find a perfect solution. if you apply -webkit-border-radius:0 !important and -webkit-appearance:none !important you get pretty close, but you lose the dropdown arrows. you would need to manually add in an arrow image. – Decagram 29/1, 2016 at 16:12

super easy solution! – Example 26/3, 2018 at 18:20

$enable-rounded: false; also applies to bootstrap 5 sass FYI – Adlei 28/5, 2021 at 5:25

M

25

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

Myeloid answered 16/3, 2012 at 17:57 Comment(1)

This is the perhaps the best solution as far as efficiency with mastering Bootstrap CSS processing. – Strawworm 9/3, 2016 at 19:52

P

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

Pastis answered 13/3, 2013 at 16:56 Comment(0)

U

19

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

Unbosom answered 20/10, 2012 at 17:41 Comment(1)

It will impact only on buttons and wherever you have added .btn – Lampe 23/3, 2013 at 1:33

A

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

Aborning answered 5/9, 2015 at 16:33 Comment(0)

S

10

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>

Seabury answered 6/3, 2020 at 8:55 Comment(0)

K

8

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

Kiyohara answered 27/9, 2016 at 18:42 Comment(1)

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. – Cannabin 31/1, 2017 at 14:31

L

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;

Latinalatinate answered 2/10, 2019 at 14:2 Comment(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. – Antabuse 6/4, 2020 at 16:43

D

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
}

Distortion answered 9/12, 2012 at 16:14 Comment(2)

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

but the extra bytes of data – Gourami 27/3, 2014 at 14:6

R

5

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

Robbins answered 29/5, 2014 at 16:13 Comment(0)

L

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

Lareine answered 3/12, 2014 at 13:3 Comment(1)

@brunos was using LESS – Walloon 14/1, 2015 at 1:48

D

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.

Diffraction answered 15/9, 2015 at 22:52 Comment(0)

E

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>

Empale answered 10/5, 2020 at 17:31 Comment(2)

which version of bootstrap – Fatherland 11/5, 2020 at 0:10

This I tried in Bootsrap 4 and 'rounded-0' removes the rounded corner on an input box – Schenck 26/9, 2020 at 10:12

S

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

Samuele answered 25/4, 2014 at 20:13 Comment(0)

G

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.

Glassblowing answered 4/8, 2013 at 10:18 Comment(1)

Problem with Flatstrap is that they don't have SCSS support for v3 yet :( – Upside 28/11, 2013 at 6:4

P

0

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

Philipps answered 5/9, 2017 at 19:8 Comment(0)

With SCSS:

With LESS:

Recommended topics

Hot tags