Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
border define el contorno de un elemento, y border-radius le agrega esquinas redondeadas — la base de casi cualquier tarjeta o botón moderno.
Explicación
Estas propiedades controlan el borde de un elemento:
border: 2px solid #color;Forma abreviada: grosor, estilo (solid, dashed, dotted) y color, en ese orden.
border-width / -style / -colorLas mismas propiedades pero separadas, útil si necesitas cambiar solo una de ellas.
border-radiusRedondea las esquinas; con un valor muy alto (como 9999px) convierte cualquier caja en una píldora o círculo.
Reto rápido
Agrega un div cuadrado de 60x60px con border-radius: 50% para crear un círculo.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
border-radius: 50% en un elemento cuadrado (mismo ancho y alto) lo convierte en un círculo perfecto.
Dato extra
border-radius acepta hasta 4 valores para redondear cada esquina de forma distinta, igual que margin y padding.
Error común
Escribir border: solid 2px sin especificar color: el navegador usa el color del texto (currentColor) por defecto, lo que puede verse distinto a lo esperado.
Siguiente paso
Ya tienes fondo y bordes. Para rematar la profundidad visual, veamos las sombras.
Ir a la siguiente lección