Deshacerse de todas las esquinas redondeadas en Twitter Bootstrap

Me encanta Twitter Bootstrap 2.0: me encanta cómo es una biblioteca tan completa ... pero quiero hacer una modificación global para un sitio muy cuadrado, que es deshacerse de todas las esquinas redondeadas en Bootstrap ...

Eso es mucho CSS para atravesar. ¿Hay un cambio global, o cuál sería la mejor manera de encontrar y reemplazar todos los redondeados?

Establezco el radio de borde de todos los elementos en "0" de esta manera:

* {
  border-radius: 0 !important;
}

Como estoy seguro de que no quiero sobrescribir esto más tarde, ¡solo lo uso! Importante.

Si no está compilando menos archivos, simplemente haga lo siguiente:

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

En bootstrap 3, si lo está compilando, ahora puede establecer el radio en el archivo variables.less:

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

En bootstrap 4, si lo está compilando, puede deshabilitar todo el radio en el _custom.scssarchivo:

$enable-rounded:   false;

Descargue los .lessarchivos de origen y deje el .border-radius()mixin en blanco.

Si está utilizando la versión Bootstrap <3 ...

Con sass / scss

$baseBorderRadius: 0;

Con menos

@baseBorderRadius: 0;

Deberá establecer esta variable antes de importar el bootstrap. Esto afectará a todos los pozos y barras de navegación.

Actualizar

Si está utilizando Bootstrap 3 baseBorderRadius debe ser border-radius-base

Si desea evitar volver a compilar todo, simplemente agregue .btn {border-radius: 0;}a su 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 pregunta es bastante antigua, sin embargo, es muy visible en los motores de búsqueda, incluso en las búsquedas relacionadas con Bootstrap 4 . Creo que vale la pena agregar una respuesta para deshabilitar las esquinas redondeadas, forma BS4.

En el _variables.scsshay varios modificadores globales para cambiar rápidamente las cosas, como habilitar o deshabilitar el sistema flex gird, esquinas redondeadas, gradientes, etc.

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

Las esquinas redondeadas son enabledpor defecto.

Si prefiere compilar Bootstrap 4 usando Sass y el suyo _custom.scsscomo yo (o usando el personalizador oficial), anular la variable relacionada es suficiente:

$enable-rounded : false

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

O defina un mixin e inclúyalo donde desee un botón sin redondear.

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

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

Al usar Bootstrap> = 3.0archivos de origen ( SASSo LESS) no tiene que deshacerse de las esquinas redondeadas en todo si solo hay un elemento que lo está molestando, por ejemplo, para deshacerse de las esquinas redondeadas en la barra de navegación, utilizar:

Con SCSS:

$navbar-border-radius: 0;

Con menos:

@navbar-border-radius: 0;

Sin embargo, si desea deshacerse de las esquinas redondeadas de todo, puede hacer lo que @ adamwong246 mencionó y usar:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

Esas dos configuraciones son las configuraciones "raíz" de las cuales navbar-border-radiusse heredarán las otras configuraciones , a menos que se especifiquen otros valores.

Para obtener una lista de todas las variables, consulte variables.less o variables.scss

El código publicado anteriormente por @BrunoS no funcionó para mí,

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

lo que usé fue

* {
  border-radius: 0 !important;
}

Espero que esto ayude a alguien

Hay una manera muy fácil de personalizar Bootstrap:

1. Simplemente vaya a http://getbootstrap.com/customize/
2. Encuentre todos los "radios" y modifíquelos como desee.
3. Haga clic en "Compilar y descargar" y disfrute de su propia versión de Bootstrap.

O puede agregar esto al html del elemento del que desea eliminar el radio del borde (de esta manera no lo eliminaría de todos los botones / elementos):

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

Con SASS Bootstrap, si está compilando Bootstrap usted mismo, puede establecer todo el radio del borde (o más específico) simplemente en cero:

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

Bootstrap tiene sus propias clases para bordes, incluido .rounded-0deshacerse de las esquinas redondeadas en cualquier elemento, incluidobuttons

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>

También es posible que desee echar un vistazo a FlatStrap . Proporciona un reemplazo de Metro-Style para Bootstrap CSS sin esquinas redondeadas, degradados y sombras paralelas.

si está usando bootstrap, puede usar bootstrap class = "rounded-0" para hacer el borde con los bordes afilados sin esquinas redondeadas <button class="btn btn-info rounded-0"">Generate</button></span>

He creado otro archivo CSS y agrego el siguiente código No todos los elementos están incluidos

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