Crear bordes y bordes redondeados

Vamos a configurar los 3 <article> para que tengan un aspecto como el del ejemplo:

• Los bordes externos son ligeramente curvos en sus 4 esquinas.
• Este mismo perímetro tiene un borde gris.
• Debajo de 'Con entusiasmo y motivación ' incluímos una línea horizontal (<hr>).

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>

.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).