• Bordes Redondeados estilos CSS3
  • Creado 1379197789
  • Seguidores: 0
  • Favoritos: 0
  • Puntos: 0
  • Medallas: 5
  • Ver perfil de meettz
  • Administrador

  • Medallas
    Hay muchas cosas que se pueden hacer con Estilos, los cuales nos ahorran mucho código y tiempo, en este caso vamos a ver como agregar bordes, mismos que se pueden usar en varias partes de la pagina para agrupar contenido.


    Empezamos con la pagina HTML, insertando la linea que contiene el archivo CSS (Cascading Style Sheets o bien hojas de estilo).

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
    <html xmlns=”http://www.w3.org/1999/xhtml”>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8? />
    <title>Borde</title>

    <!– CSS –>
    <link rel=”stylesheet” href=”css/estilo.css” type=”text/css” media=”screen” />
    <!– termina CSS –>

    </head>

    <body>

    <div id=”bordesolido”>

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    prueba
    <p>&nbsp;</p>
    </div>

    </body>
    </html>



    Como ven ponemos un “div”, llamado bordesolido, el cual vamos a editar en la pagina .css a continuación.



    #bordesolido{

    /* redondear parte superior derecha————-*/
    moz-border-radius-topright: 7px;
    -webkit-border-top-right-radius: 7px;
    border-top-right-radius: 7px;

    /* redondear parte superior izquierda————-*/

    moz-border-radius-topleft: 7px;
    -webkit-border-top-left-radius: 7px;
    border-top-left-radius: 7px;

    /*Para redondear la parte inferior derecha:————-*/
    -moz-border-radius-bottomright: 7px;
    -webkit-border-bottom-right-radius: 7px;
    border-bottom-right-radius: 7px;

    /*Para redondear la parte inferior izquierda:————-*/
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    border-bottom-left-radius: 7px;

    box-shadow: 0 0 10px #666666;
    }



    La ultima linea Box-shadow nos agrega una sombra y nos permite ver el borde redondeado, es importante señalar que esto no funciona como es de costumbre en IE8.

    Pero en Google Chrome, firefox va correcto, mas adelante veremos como hacerlo para Internet Explorer 8.


    Ejemplo
  • Otros posts que te van a interesar:

    0 Comentarios

    Cargando comentarios espera un momento...
    No tienes permisos para comentar.

    Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!