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

User · Accepted Answer

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

User · Answer

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      lt -- 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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 gt  active gt 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

User · Answer

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

User · Answer

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  lt button class  btn btn-info rounded-0   gt Generate lt  button gt  lt  span gt

User · Answer

If you want to avoid recompiling the all thing  just add  btn  border-radius  0   to your CSS

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt a class  btn btn-primary  gt Regular Rounded Corners lt  a gt  x000D   lt a class  btn btn-primary rounded-pill  gt Pill Corners lt  a gt  x000D   lt a class  btn btn-primary rounded-0  gt Square Corners lt  a gt  x000D   x000D   x000D

User · Answer

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

User · Answer

If you are using Bootstrap version  lt  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

[css] Getting rid of all the rounded corners in Twitter Bootstrap

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-2