Cómo Redondear Bordes Con CSS (Border CSS)

CON la función border-radius PODEMOS REDONDEAR LOS BORDES DE IMÁGENES O DE CUALQUIER OTRO ELEMENTO CON CSS

El diseño de cualquier blog de viajes que se precie es esencial para conseguir un plus de lectores. Y muchas veces, dejar las esquinas redondeadas de un elemento o de una imagen ayuda a ello. Te cuento cómo hacerlo.

Redondear los bordes con CSS es muy fácil ya que solo has de conocer un par de líneas de código en CSS para dejar tu blog como es debido.

Pasos Para Redondear Bordes Con CSS En WordPress

Para editar estos aspectos en WordPress, hay que personalizar el tema que tengas instalado. Da igual cual sea, ya que todos tienen un apartado para poder insertar tu código CSS personalizado.

1. Acceder a Apariencia
2. Acceder a Personalización
3. Insertar el código CSS desde el apartado CSS adicional (tienes el proceso aquí abajo 👇)

Código Redondear Bordes Con CSS En WordPress

En el ejemplo, te pego el código que utilizo en los botones color naranja de Proyecto Viajero. Hay otros atributos del botón, pero he resaltado el necesario para que el botón tenga los bordes redondeados:

.button-orange {
	background-color:#ff8400;
	border-color:#e57600;
	border-width:2px 2px 4px 2px;
	border-style:solid;
	border-radius:4px;
	color:#ffffff !important;
	padding:15px;
	text-align:center;
	text-decoration:none;
	display:inline-block;
	font-size:0.9em;
	font-weight:bold;
	margin:4px 2px;
	cursor:pointer;
	transition-duration:0.3s}

Atención! En el mundo real, las 4 esquinas de una imagen o un botón, casi siempre son equivalentes. Pero si ese no es tu caso, con CSS puedes especificar el redondeado de las esquinas de forma individual.

Este sería el código:

.button-orange {
	border-radius:5px 10px 15px 20px;
}

Como siempre pasa en CSS, en este caso siempre se aplica el orden de las agujas del reloj, contando las esquinas en el siguiente orden:

1. Superior izquierda
2. Superior derecha
3. Inferior derecha
4. Inferior izquierda

Eso es todo! ★

Te Ha Gustado El Post? Guarda El Pin!