superiores - quitar bordes redondeados css

Deshacerse de todas las esquinas redondeadas en Twitter Bootstrap

Question

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, no redondo, que es deshacerse de todas las esquinas redondeadas en Bootstrap ...

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

Answer 1

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

Con SCSS:

$navbar-border-radius: 0;

Con menos:

@navbar-border-radius: 0;

Sin embargo, si quieres deshacerte de las esquinas redondeadas de todo, puedes hacer lo que @ adamwong246 mencionó y usar:

$baseBorderRadius: 0;
@baseBorderRadius: 0;

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

Para ver una lista, todas las variables consultan las variables.less o variables.scss

Answer 2

Descargue los archivos fuente .less y haga que la .border-radius() esté en blanco.

Answer 3

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

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

lo que yo usaba era

* {
  border-radius: 0 !important;
}

Espero que esto ayude a alguien

Answer 4

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

Answer 5

Esta pregunta es bastante antigua, pero 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, BS4.

En _variables.scss existen varios modificadores globales para cambiar rápidamente las cosas, como habilitar o deshabilitar el sistema _variables.scss , esquinas redondeadas, degradados, 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 están enabled por defecto.

Si prefieres compilar el Bootstrap 4 con Sass y tu propio _custom.scss como yo (o con el personalizador oficial), anular la variable relacionada es suficiente:

$enable-rounded : false

Answer 6

Establecí el radio de borde de todos los elementos a "0" de esta manera:

* {
  border-radius: 0 !important;
}

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

Si no está compilando sus menos archivos solo haga lo siguiente:

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

En el bootstrap 3, si 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 está compilando, puede deshabilitar el radio alltogether en el archivo _custom.scss :

$enable-rounded:   false;

Answer 7

Hay una forma muy sencilla de personalizar Bootstrap:

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

Answer 8

He creado otro archivo CSS y agregué 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;
}

Answer 9

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;"

Answer 10

Si desea evitar recompilar todo, simplemente agregue .btn {border-radius: 0;} a su CSS.

Answer 11

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

Con sass / scss

$baseBorderRadius: 0;

Con menos

@baseBorderRadius: 0;

Tendrá que establecer esta variable antes de importar el programa de arranque. Esto afectará a todos los pozos y barras de navegación.

Actualizar

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

Answer 12

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

O defina un mixin e inclúyalo donde desee un botón no redondeado.

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

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

Answer 13

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