Redondeo de bordes de bloque en CSS
Ahora aprenderemos a redondear las esquinas
de un bloque. Para esto debemos aplicar
la propiedad border-radius, que acepta
valores en píxeles.
¿Qué significa que especificamos un redondeo,
por ejemplo, de 10px? Es el radio del círculo
que se puede inscribir en este redondeo. Si
no se te da bien las matemáticas y no entiendes
la última frase - olvídala y
simplemente ajusta el redondeo a ojo. Con
algo de experiencia esto no es un problema (no existe
un instrumento de medición para medir redondeos,
al menos yo no he oído hablar de ello).
Vamos a redondear las esquinas de un bloque, estableciendo
un redondeo de 10px:
<div id="elem"></div>
#elem {
width: 300px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
}
:
Repite la página según este ejemplo: