Livrar-se de todos os cantos arredondados no Twitter Bootstrap

Adoro o Twitter Bootstrap 2.0 - adoro como é uma biblioteca completa ... mas quero fazer uma modificação global em um site muito quadrado, que é para livrar-se de todos os cantos arredondados do Bootstrap ...

Isso é muito CSS para ser analisado. Existe uma opção global ou qual seria a melhor maneira de encontrar e substituir todas as opções arredondadas?

Defino o raio da borda de todos os elementos como "0" assim:

* {
  border-radius: 0 !important;
}

Como tenho certeza de que não quero substituir isso mais tarde, apenas uso! Important.

Se você não estiver compilando menos arquivos, faça:

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

No bootstrap 3, se você estiver compilando, agora você pode definir o raio no arquivo variables.less:

@border-radius-base:        0px;
@border-radius-large:       0px;
@border-radius-small:       0px;

No bootstrap 4, se você estiver compilando, é possível desativar o raio no _custom.scssarquivo:

$enable-rounded:   false;

Faça o download dos .lessarquivos de origem e deixe o .border-radius()mixin em branco.

Se você estiver usando o Bootstrap versão <3 ...

Com sass / scss

$baseBorderRadius: 0;

Com menos

@baseBorderRadius: 0;

Você precisará definir essa variável antes de importar o bootstrap. Isso afetará todos os poços e barras de navegação.

Atualizar

Se você estiver usando o Bootstrap 3 baseBorderRadius deve ser border-radius-base

Se você quiser evitar recompilar tudo, basta adicionar .btn {border-radius: 0;}ao seu 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;
}

Esta questão é bastante antiga, porém é altamente visível nos mecanismos de pesquisa, mesmo nas pesquisas relacionadas ao Bootstrap 4 . Eu acho que vale a pena adicionar uma resposta para desativar os cantos arredondados, forma BS4.

No _variables.scssexistem vários modificadores globais existe para alterar rapidamente o material tal como activando ou desactivando sistema cingidos de flex, cantos arredondados, gradientes etc.:

$enable-flex:          false !default;
$enable-rounded:       true !default; // <-- This one
$enable-shadows:       false !default;
$enable-gradients:     false !default;
$enable-transitions:   false !default;

Os cantos arredondados são enabledpor padrão.

Se você preferir compilar o Bootstrap 4 usando o Sass e o seu próprio _custom.scsscomo eu (ou usando o personalizador oficial), substituir a variável relacionada é suficiente:

$enable-rounded : false

.btn {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

Ou defina um mixin e inclua-o onde quiser um botão não arredondado.

@mixin btn-round-none {
  border-radius:                    0px;
  -webkit-border-radius:            0px;
  -moz-border-radius:               0px;
}

.btn.btn_1 {
@inlude btn-round-none
}

Ao usar o Bootstrap> = 3.0arquivos de origem ( SASSou LESS), você não precisa se livrar dos cantos arredondados em tudo, se houver apenas um elemento que o incomoda, por exemplo, para se livrar dos cantos arredondados na barra de navegação, usar:

Com o SCSS:

$navbar-border-radius: 0;

Com menos:

@navbar-border-radius: 0;

No entanto, se você quiser se livrar dos cantos arredondados de tudo, faça o que o @ adamwong246 mencionou e use:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Essas duas configurações são as configurações "raiz" das quais as outras configurações navbar-border-radiusserão herdadas, a menos que outros valores sejam especificados.

Para obter uma lista de todas as variáveis, consulte o variables.less ou o variáveis.scss

O código postado acima por @BrunoS não funcionou para mim,

* {
  .border-radius(0) !important;
}

o que eu usei foi

* {
  border-radius: 0 !important;
}

Espero que isso ajude alguém

Existe uma maneira muito fácil de personalizar o Bootstrap:

1. Basta ir para http://getbootstrap.com/customize/
2. Encontre todos os "raios" e modifique-os como desejar.
3. Clique em "Compilar e baixar" e aproveite sua própria versão do Bootstrap.

Ou você pode adicionar isso ao html do elemento do qual deseja remover o raio da borda (desta forma, não o removeria de todos os botões / elementos):

style="border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;"

Com o SASS Bootstrap - se você estiver compilando o Bootstrap - você pode definir todo o raio da borda (ou mais específico) simplesmente para zero:

$border-radius:               0;
$border-radius-lg:            0;
$border-radius-sm:            0;

O Bootstrap possui suas próprias classes para bordas, incluindo .rounded-0a remoção de cantos arredondados em qualquer elemento, incluindobuttons

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>

Você também pode dar uma olhada no FlatStrap . Ele fornece uma substituição no estilo Metro para o CSS do Bootstrap sem cantos arredondados, gradientes e sombras projetadas.

se você estiver usando o bootstrap, basta usar a classe bootstrap = "rounded-0" para fazer a borda com as bordas afiadas sem cantos arredondados <button class="btn btn-info rounded-0"">Generate</button></span>

Criei outro arquivo css e adicionei o seguinte código Nem todos os elementos estão incluídos

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