🖼️ Cómo agregar bordes personalizados a imágenes con CSS

Usar bordes en imágenes puede hacer que tu contenido se vea más elegante o profesional. Aquí te muestro cómo aplicar border-color, border-width, border-style y border-radius para mejorar el estilo visual de una imagen.

✨ Ejemplo:

<img class="imagen-con-borde" 
     src="https://upload.wikimedia.org/wikipedia/commons/9/90/Labrador_Retriever_portrait.jpg" 
     alt="Un labrador retriever feliz">

🎨 Estilo CSS aplicado:

.imagen-con-borde {
  border-color: saddlebrown;
  border-width: 4px;
  border-style: solid;
  border-radius: 10px;
  width: 300px; /* Opcional, para que no sea tan grande */
}

🔍 ¿Qué hace cada propiedad?

• border-color: define el color del borde (en este caso, marrón)
• border-width: define el grosor (4 píxeles)
• border-style: puede ser solid, dashed, dotted, etc.
• border-radius: redondea las esquinas (10 píxeles)

🧪 Resultado final:

Así se verá la imagen:

📌 Tip:

Puedes cambiar el color, estilo y radio del borde para crear marcos únicos según el diseño de tu blog.

--- ¿Te gustaría que hagamos una entrada parecida para `box-shadow`, o para crear un marco tipo polaroid o retro? También podrías usar esto en gadgets o galerías. 🖤✨