consigue un 5% de descuento en tu seguro de viaje Mondo

Cómo Redondear Bordes Con CSS (Border CSS)

Tutoriales Blogger: Trucos para Wordpress, HTML y CSS - Blogs de Viajes y de todo tipo
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.

border-radius CSS
Se pueden redondear bordes con CSS en cualquier elemento del blog, incluyendo imágenes y botones.

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 👇)
border-radius css - como1
border-radius css - como2

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! ★

webempresa logo
EL MEJOR HOSTING DEL MUNDO EN ESPAÑOL

El hosting de Webempresa es rápido, confiable y seguro: sus servidores son compartidos aislados, discos duros SSD (rápidos!) y ofrecen un hosting optimizado. Ah! y además, te atienden en español. Aquí puedes contratar tu hosting

Te Ha Gustado El Post? Guarda El Pin!

Los mejores trucos y consejos para que tu bog de viajes sea realmente atractivo añadiendo HTML y CSS personalizado - #blogging #wordpress #blogdeviajes

Descubre el Mundo!

Déjanos hacer el trabajo duro a nosotros y recibe en tu email los mejores artículos y mapas gratis.

Nunca enviamos spam desde Proyecto Viajero! Échale un vistazo a nuestra Política de Privacidad para más información.

Lo Último De Proyecto Viajero