Manera correcta de crear esquinas redondeadas en Twitter Bootstrap

Acabo de comenzar con Twitter Bootstrap y aquí hay una pregunta.

Estoy creando un <header>bloque personalizado y quiero que se redondeen las esquinas inferiores.

¿Hay alguna forma "correcta" de hacer esto usando clases predefinidas, o tengo que especificarlo manualmente como:

border-radius: 10px;               // and all that cross-browser trumpery

Por ahora, estoy usando cssestilos. ¿Quizás sea mejor usarlo lesspara ese problema?

Supongo que es lo que estás buscando: http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

Puedes usarlo porque hay un mixin:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Para Bootstrap 3, hay 4 mixins que puede usar ...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

o puedes hacer tu propio mixin usando los 4 primeros para hacerlo de una vez.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}

<div class="img-rounded"> le dará esquinas redondeadas.

Bootstrap es solo un archivo CSS grande, útil y simple , no un marco ni nada que no pueda anular. Digo esto porque he notado que muchos desarrolladores se apegaron a las clases de BS y se volvieron perezosos en codificadores de "No puedo-escribir-código-CSS-más" [¡este no es tu caso, por supuesto!].

Si tiene algo que necesita, vaya con las clases de Bootstrap; si no, escriba su código adicional en buen estado style.css.

Para tener lo mejor de ambos mundos, puede escribir sus propias declaraciones en MENOS y volver a compilar todo según sus necesidades, minimizando la solicitud del servidor como un bono.

Según la documentación de bootstrap 3.0. no hay una clase de esquinas redondeadas o id para la etiqueta div .

puedes usar el comportamiento del círculo para la imagen usando

<img class="img-circle"> 

o simplemente use la border-radiuspropiedad css3 personalizada en css

solo para uso coner redondeado inferior siguiendo

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

si quieres div circular sensible , prueba esto

referido desde los círculos CSS receptivos

Lo que quieres es un panel de Bootstrap . Simplemente agregue la panelclase y su encabezado se verá uniforme. También puede agregar clases panel panel-info, panel panel-successetc. Funciona para casi cualquier elemento de bloque, y debe trabajar con <header>, pero espero que se utiliza sobre todo con <div>s.

Sin menos, ans simplemente por un div dado:

En un CSS:

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

En html:

 <div class="footer">
        <p>blablabla</p>
      </div>

Con bootstrap4 puedes hacerlo fácilmente así: -

class="rounded" 

o

class="rounded-circle"

Si está utilizando Bootstrap Sass , aquí hay otra forma de evitar tener que agregar clases adicionales al marcado de su elemento:

@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";

.your-class {
  $r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
  @include border-top-radius($r);
  @include border-bottom-radius($r);
}

En Bootstrap 4, la forma correcta de bordear sus elementos es nombrarlos de la siguiente manera en la lista de clases de sus elementos:

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

Para usar archivos CSS de Bootstrap 4, simplemente puede usar el CDN y usar el siguiente enlace en su archivo HTML:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Esto le proporcionará los conceptos básicos de Bootstrap 4. Sin embargo, si desea utilizar la mayoría de los componentes de Bootstrap 4, incluyendo información sobre herramientas, ventanas emergentes y menús desplegables, es mejor utilizar el siguiente código en su lugar:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Alternativamente, puede instalar Bootstrap usando NPM o Bower y vincular a los archivos allí.

* Tenga en cuenta que la etiqueta inferior de las tres es la misma que la primera etiqueta en la primera ruta de enlace.

Un ejemplo de trabajo completo podría ser:

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

En el ejemplo anterior, la imagen se centra utilizando el margen automático de Bootstrap a la izquierda y a la derecha.