¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Programación Hacer esquinas redondas con...
¡Hola! Soy nuevo en la comunidad de Habbos (en realidad llevaba tiempo registrado, pero nunca he posteado ni comentado).
Bueno empecemos. Antes de todo tenemos que poner una imagen. (en mi caso en el centro de la página)


<!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>Documento sin título</title>
</head>

<body>
<center>
<a href="http://fb.com/lippomatii">
<img src="http://bit.ly/KNZjkm" width="180" height="180" />
</a>
</center>
</body>
</html>


Si vemos esto en el explorador vamos a ver mi imagen de perfil de Facebook con bordes cuadrados. Bien, lo que nosotros queremos es redondearla sin usar ningún tipo de programa de edición de imágenes, así que vamos a optar por CSS.
Creamos una hoja de estilos CSS:


<style type="text/css">
/* Usando border-radius (para todos los navegadores)
y overflow:hidden , se logra el efecto en la IMG */
.imagen {
 border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
 overflow: hidden;
 float: center;
}
</style>


Lo que he hecho ha sido poner un border-radius que funciona para webkit (la depuradora de Google Chrome), Mozilla Firefox y para IE. Ahora lo vamos a integrar al head y añadirle a la imagen la clase ".imagen"


<!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>Documento sin título</title>
<style type="text/css">
/* Usando border-radius (para todos los navegadores)
y overflow:hidden , se logra el efecto en la IMG */
.imagen {
 border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
 overflow: hidden;
 float: center;
}
</style>
</head>

<body>
<center>
<a href="http://fb.com/lippomatii">
<img src="http://bit.ly/KNZjkm" width="180" height="180" class="imagen" />
</a>
</center>
</body>
</html>


¡Y bien, ya tenemos nuestra imagen redondeada! Ya no hará falta que estés redondeando todas las imágenes con Photoshop y ponerle transparencia etc... ahora simplemente a lo que quieras redondear le añades la clase ".imagen" y ya esta!
Un gusto haber compartido esto con la comunidad de Habbos ¡hasta pronto, dejen sus comentarios!
fan de calippo y la habbo cola 💚
Muy interesante Matías :cz:
Para seguirme solamente tienes que darle al corazón
@maoellisto

Muy interesante Matías :cz:

Gracias Deli  :cejas:
fan de calippo y la habbo cola 💚
está muy bien, para completar y los q no conocen mucho del tema no se confundan le agregaría esto
<img class="imagen" src="TUIMAGEN.jpg" alt="" />
Es para que la imagen tome los atributos especificados en .imagen

Edit: no me funciona bien el scroll XD, me acabo de dar cuenta que lo habías puesto un poco más abajo, no dije nada
jeje
Y para cuando lleguéis a ser vagos como yo, simplemente entran a esta página: http://border-radius.com/
Y listo, ya sabrán que hacer.
@Initsogar

Y para cuando lleguéis a ser vagos como yo, simplemente entran a esta página: http://border-radius.com/
Y listo, ya sabrán que hacer.

Tienes razón Rafa. Creo que mañana haré un post con las mejores herramientas web para crear un sitio web con CSS
fan de calippo y la habbo cola 💚
Programación Hacer esquinas redondas con...