Getting rid of all the rounded corners in Twitter Bootstrap
CssTwitter BootstrapTwitter Bootstrap-2Css Problem Overview
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?
Css Solutions
Solution 1 - Css
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;
Solution 2 - Css
Download the source .less
files and make the .border-radius()
mixin blank.
Solution 3 - Css
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
Solution 4 - Css
If you want to avoid recompiling the all thing, just add .btn {border-radius: 0;}
to your CSS.
Solution 5 - Css
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;
}
Solution 6 - Css
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
Solution 7 - Css
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>
Solution 8 - Css
.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
}
Solution 9 - Css
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
Solution 10 - Css
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;
Solution 11 - Css
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
Solution 12 - Css
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.
Solution 13 - Css
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>
Solution 14 - Css
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;"
Solution 15 - Css
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.
Solution 16 - Css
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;
}