Remove all rounded corners from Bootstrap 3 using Less

A Bootstrap 3 design I am working on requires square rather than the default rounded css corners. The quick and easy solution involves overriding the values of only 5 Less variables in my own Less variables file:

@border-radius-base:    0;
@border-radius-large:   0;
@border-radius-small:   0;
@pager-border-radius:   0;
@badge-border-radius:   0;

@border-radius-base: 0;

@border-radius-large: 0;

@border-radius-small: 0;

@pager-border-radius: 0;

@badge-border-radius: 0;

There are a lot of other variables in Bootstrap for setting various border radius’, but all of them use one of the above values by default, with the exception of .img-circle – although .img-circle without rounded corners seems an odd idea.

// Perfect circle
.img-circle {
  border-radius: 50%; // set radius in percents
}

// Perfect circle

.img-circle {

border-radius: 50%; // set radius in percents

}

For quick reference, here are the other Bootstrap 3 variables (copied straight from Bootstrap’s variables.less) that can be used to customise border-radius in your Less-based web designs together with their default values:

@border-radius-base:        4px;
@border-radius-large:       6px;
@border-radius-small:       3px;

@border-radius-base: 4px;

@border-radius-large: 6px;

@border-radius-small: 3px;

// Allows for customizing button radius independently from global border radius
@btn-border-radius-base:         @border-radius-base;
@btn-border-radius-large:        @border-radius-large;
@btn-border-radius-small:        @border-radius-small;

// Allows for customizing button radius independently from global border radius

@btn-border-radius-base: @border-radius-base;

@btn-border-radius-large: @border-radius-large;

@btn-border-radius-small: @border-radius-small;

//** Default `.form-control` border radius
// This has no effect on `&lt;select&gt;`s in some browsers, due to the limited stylability of `&lt;select&gt;`s in CSS.
@input-border-radius:            @border-radius-base;
//** Large `.form-control` border radius
@input-border-radius-large:      @border-radius-large;
//** Small `.form-control` border radius
@input-border-radius-small:      @border-radius-small;

//** Default `.form-control` border radius

// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.

@input-border-radius: @border-radius-base;

//** Large `.form-control` border radius

@input-border-radius-large: @border-radius-large;

//** Small `.form-control` border radius

@input-border-radius-small: @border-radius-small;

@navbar-border-radius:             @border-radius-base;

1	@navbar-border-radius: @border-radius-base;

@nav-pills-border-radius:                   @border-radius-base;

1	@nav-pills-border-radius: @border-radius-base;

@pager-border-radius:                  15px;

1	@pager-border-radius: 15px;

@alert-border-radius:         @border-radius-base;

1	@alert-border-radius: @border-radius-base;

//** Variable for setting rounded corners on progress bar.
@progress-border-radius:      @border-radius-base;

1 2	//** Variable for setting rounded corners on progress bar. @progress-border-radius: @border-radius-base;

//** List group border radius
@list-group-border-radius:      @border-radius-base;

1 2	//** List group border radius @list-group-border-radius: @border-radius-base;

@panel-border-radius:         @border-radius-base;

1	@panel-border-radius: @border-radius-base;

//** Thumbnail border radius
@thumbnail-border-radius:     @border-radius-base;

1 2	//** Thumbnail border radius @thumbnail-border-radius: @border-radius-base;

@badge-border-radius:         10px;

1	@badge-border-radius: 10px;

Hello :)

This blog has been retired.

Remove all rounded corners from Bootstrap 3 using Less

Share this: