Cómo poner bordes redondos a la sidebar y a las entradas de tu blog


Si quieres redondear las esquinas de tu blog es algo muy sencillo. Bastará añadir un pequeño código en nuestra plantilla justamente en #sidebar-wrapper (también se puede añadir los bordes en las entradas, pero en lugar de #sidebar-wrapper hay que ir a #main-wrapper).



-moz-border-radius: 15px;-webkit-border-radius: 15px;
border: 3px solid #cc6666;


Una vez finalizado quedaría algo así:


#sidebar-wrapper {width: 180px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
background:#cc9999;
margin: 0 0 5px 0;
padding: 6px 6px 6px 22px;
float: right;
font-size: 10px; text-transform: uppercase;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}



Gracias a gemmablog.

12 comentarios:

  1. ¡Pero qué bien sale todo lo que pones! Me quedaron la mar de monos los bordes, pero con el dichoso explorer no se ven las esquinas redondeadas, con Mozilla sí y quedan muy bien!
    ¡¡¡¡¡¡¡¡GRACIAS!!!!!!!!

    PD. Todavía se me resisten los formularios para conactar y las dichosas tres columnas, pero algún día lo conseguiré.

    ResponderEliminar
  2. Perdón, quise decir contactar, se entiende.
    De nuevo, GRACIAS.

    ResponderEliminar
  3. Hola Ángeles, me alegro que estés contenta con el resultado de los bordes. Si tienes problemas con las 3 columnas (imagino que te refieres a las columnas a pie de página) y con el formulario te agradecería que lo hablásemos en sus respectivas entradas, así el resto de usuarios podrá aprender también. Sino siempre podemos hablar por correo y te ayudo lo mejor que pueda.

    Un saludo y gracias a ti por ser una fiel seguidora a este blog.

    ResponderEliminar
  4. Muchas gracias por la informacion!!!

    http://intercambioinformatico.blogspot.com/

    ResponderEliminar
  5. Hola mfgomez, bienvenida al blog. Me alegro que te guste. Por favor, para la próxima vez lee la norma número 4) a la hora de comentar. Gracias, un saludo.

    ResponderEliminar
  6. Hola, tengo un pequeño problema... veras uso mozilla firefox y aun asi no veo los bordes redondeados sino que los veo cuadrado... hice el mismo proceso en otro blog que tengo y que tiene la misma plantilla y en el si se ven redondos... alguien sabe el motivo? :S gracias de todos modos y muy buen post ^^

    ResponderEliminar
  7. ah mira os dejo mi direccion y me dicen si lo ven bien quizas sea por mi pc... http://paraisoenlaoscuridad.blogspot.com/

    ResponderEliminar
  8. Excelente, es justo lo que estaba buscando, gracias por el truquito, saludos.

    ResponderEliminar
  9. Hola Buenas!
    Uso la plantilla simple (la de color azul) y he buscado #sidebar-wrapper y no me sale T·T
    ¿Me podrías ayudar?

    ResponderEliminar
  10. hola te puedo hacer una pregunta?

    puse este efecto en mi blog http://aloquede2temporada.blogspot.com
    funciono bien pero solo que el efecto de borde solo se ve en google chrome pero en firefox se ve cuadrado por favor necesito ayuda

    ResponderEliminar
  11. Hola yo uso la plantilla awesome y no me sale eso de #sidebar-wrapper que hago? Gracias de antemano

    ResponderEliminar
  12. Bueno es decir ya se que no me saldrá porque sue3le salir en la plantilla mínima o algo así creo...pero ¿Habría algúna manera de que funcionase en la plantilla Awesome?. Gracias de nuevo

    ResponderEliminar