Bordes rendondeados con CSS 3


con css3 ya podemos darles bordes redondeados con solo puro código, veamos el ejemplo

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jarivia rounded corners</title>

<style type="text/css">
#redondo {
padding: 3px;
background: #CD5C5C ;

/*para navegadores basados en webkit*/
-webkit-border-top-right-radius:8px;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
-webkit-border-bottom-left-radius:8px;

/*para navegadores basados en mozilla*/
-moz-border-radius-bottomright:8px;
-moz-border-radius-bottomleft:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-topleft:8px

/*para navegadores basados en konqueror*/
-khtml-border-radius-bottomright:8px;
-khtml-border-radius-bottomleft:8px;
-khtml-border-radius-topright:8px;
-khtml-border-radius-topleft:8px

/*las instrucciones oficiales que trabajaran con el behavior*/
border-radius-bottomright:8px;
border-radius-bottomleft:8px;
border-radius-topright:8px;
border-radius-topleft:8px

/*el behavior para el resto*/
behavior:url(border-radius.htc);
}
</style>
</head>
<body>
<div id=redondo> <p>contenido<br>en<br>redondo</p> 
</div>
</body>
</html>

por supuesto tienen que bajarse este archivo border-radius.tc que como indica la ruta, tiene que estar al lado del html final

http://code.google.com/p/curved-corner/

  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: