Crear bordes y bordes redondeados
Profesor: Javier López
Volver
Propuesta de la actividad
Creación de cajas con bordes y bordes redondeados
Resultado final

Creación de cajas con bordes y bordes redondeados
Vamos a configurar los 3 <article> para que tengan un aspecto como el del ejemplo: Para hacer estos cambios a los 3 <article> a la vez vamos a ponerles el mismo nombre de clase (class) para que el selector CSS afecte a todos y un nombre id sólo al <article> central (ya que en el temas posteriores le daremos unas propiedades particulares).

<article  class="cuadros">
  <div  id="imagen3" class="imagenes">
     <img src="img/imagen3.png">
  </div>
  <h3>Con entusiasmo y motivación</h3><hr>
  La <b>motivación</b> y el <b>entusiasmo personal</b> mueve montañas y es lo 
  que nos hace diferentes.<p>Pruébenos una vez y se convencerá para siempre.
</article>
Con este cambio todavía no podemos apreciar ningún cambio ya que nos falta el CSS correspondiente.
Vamos a configurar las cajas de tipo <article>, que para mayor seguridad les hemos dado un nombre de clase (class="cuadros").
estilos.css
.cuadros{
   width:240px;
   border:1px lightgray solid;
   border-radius:3px;
   background-color:white;
   text-align:center;
   padding:5px 5px 22px 5px;
}
El selector '.cuadros{ ' incluye a todas las cajas que tiene un class="cuadros", que en este caso son tres.
width:240px; limita la anchura de cada uno de los cuadros, de tal manera que los 3 <article> puedan posteriormente caber (ya que todavía no se alinearán).
border:1px lightgray solid crea una línea que rodea cada <article> de 1 píxel de grosor, de color gris suave y de tipo sólido.
border-radius:3px; indica la curvatura de las 4 esquinas exteriores a 3 píxeles.
background-color:white; coloca un fondo de color blanco.
text-align=center; centra todo el contenido (incluyendo la imagen).
padding:5px 5px 22px 5px; deja un margen interno de píxeles de 5 píxeles (excepto para la parte inferior, que es de 22 píxeles).

Haz clic aquí para