Bordes redondeados en css3

Los bordes redondeados hasta hace unos años eran un gran problema. A los diseñadores les encanta hacer bordes redondeados en sus diseños, y con mucha razón, ya que quedan muy bonitos, pero para los maquetadores esto antes no era tan sencillo. css2 no tienen forma de hacer bordes redondeados, y para resolver esto deben usarse soluciones como agregar imágenes que simulan ser parte del diseño con la forma redondeada en las esquinas.

En css3 la cosa se facilita bastante con la ayuda de las propiedades:

  • border-top-left-radius: borde arriba a la izquierda
  • border-top-right-radius: borde arriba a la derecha
  • border-bottom-right-radius: borde abajo a la derecha
  • border-bottom-left-radius: borde abajo a la izquierda

O bien también podemos usar la propiedad border-radius, que al igual que margin, padding y border puede recibir cuatro valores. El primero es el borde en la esquina superior izquierda, el segundo es la esquina superior derecha, la esquina inferior derecha y finalmente la esquina inferior izquierda (Como las agujas del reloj)

border-radius: 20px 10px 50px 5px;

Pero para no perder la costumbre en css no todo es tan sencillo en cuanto a compatibilidades en navegadores. Para que Firefox y Safari tomen los bordes redondeados hay que agregar otras dos propiedades:

/* Para que funcione en Firefox */
-moz-border-radius: 20px 10px 50px 5px;
/* Para que funcione en Safari */
-webkit-border-radius: 20px 10px 50px 5px;

Ahora, en el caso de Internet explorer los bordes redondeados funcionan a partir de la versión 9.

El código quedaría así:

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">
 <head>
    <meta charset="utf-8">
    <title>Aca va el titulo de la pagina</title>
    <style type="text/css">
       #contenedor {
          width: 300px;
          padding: 10px;
          color: white;
          background-color: indigo; 
          /* El primer valor es arriba a la izquierda, luego sigue en el sentido de las agujas del reloj */
          border-radius: 20px 10px 50px 5px;
          /* Para que funcione en Firefox */
          -moz-border-radius: 20px 10px 50px 5px;
          /* Para que funcione en Safari */
          -webkit-border-radius: 20px 10px 50px 5px;
       }
    </style>
 </head>
 <body>
    <div id="contenedor">
       <p> Dentro de este contenedor hay esquinas redondeadas. </p>
       <p> Para ello hay que usar la propiedad <strong> border-radius </strong> . Los valores serán la cantidad de borde que le das a las esquinas. El primer valor es para arriba a la izquierda, luego arriba a la derecha, el tercero abajo a la derecha y finalmente abajo a la izquierda. </p>
       <p> Sin embargo para visualizarlo correctamente en los navegadores hay que usar <strong> -moz-border-radius </strong> y <strong> -webkit-border-radius </strong> para Safari. </p>
    </div>
 </body>
</html>

 

 

 

Redes sociables

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    *