Una forma sencilla de solucionarlo y mejorar con ello la experiencia del usuario es con jQuery:

Solución sencilla

En el header de la página se agrega el script que hará el efecto:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('#arriba').click(function(){ //Id del elemento cliqueable
		$('html, body').animate({scrollTop:0}, 'slow');
		return false;
	});
});
</script>

Y el enlace que envía al usuario arriba es:

<a href='#' id='arriba'>Volver arriba &uarr;</a>

Solución completa

Una solución más completa y personalizada se consigue con plugins como:

• Smooth-scroll.
• ScrollTo.
• jQuery.ScrollTo.

Los plugins son más robustos, así que valen la pena solo si hace mucho uso de anclas en una página y estas son claves en la navegación. Recordar que usar estas soluciones con jQuey se justifican si la librería se usa en la solución de otros problemas, de otro modo, una solución basada en javascript "puro" sería más viable.

Solución

En Web Designer Wall plantean una solución con jQuery y usando border-radius (ver demostración). La solución consiste en agregar el siguiente script al header de la página:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});
</script>

Y a cada imagen en la que se desea el efecto de esquinas redondeadas se le agrega la clase: rounded-img o rounded-img2. Ejemplo:

<img src="images/blogandweb.png" class="rounded-img" alt="Blog and Web" />

Y por último, se definen estas clases CSS en el header del documento o el archivo de estilos:

.rounded-img {
	display: inline-block;
	border: solid 1px #000;
	overflow: hidden;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.rounded-img2 {
	display: inline-block;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	-moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
	box-shadow: inset 0 1px 5px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 0 rgba(0, 0, 0, .6);
}

Explicación

La propiedad border-radius no puede actuar cuando el elemento al que se aplica contiene una imagen, sin embargo, funciona correctamente cuando el elemento tiene a esa imagen como fondo.

El script oculta la imagen (con opacity:0) y la envuelve con un elemento <span> que tiene a la misma imagen como fondo.

Conclusión

Una solución bastante práctica y útil principalmente en cabeceras de sitios web, pero aplicable a cualquier imagen. Lo cierto es que esto es un bug, que los navegadores tendrán que arreglar en sus versiones siguientes.

Si no haz usado jQuery, con los siguientes 10 snippets tendrás un ligera idea del potencial de este librería javascript.

1. Agregar/eliminar una clase CSS a un elemento

Especificando un selector, simplemente se usa la función addClass de jQuery para agregar un clase CSS.

Ejemplo: al dar clic en un botón con un id "boton", que agregue la clase "alternativo" a un div con id "header":

$("#boton").click(function () {     $("#header").addClass("alternativo"); })

Y análogamente para removeClass, que cualquier clase establecida en un elemento.

2. Cambiar la hoja de estilos de un documento.

Con jQuey es sencillo seleccionar un elemento a partir de un atributo y también modificarlo con la función attr.

Ejemplo: Cambiar la hoja de estilos de un sitio web al pulsar un link con id "cambiarestilos".

$("#cambiarestilos").click(function () {     $("link[media='screen']").attr("href", "estilos2.css"); })

Análogamente existe una función para remover atributos, con un nombre bastante obvio: removeAttr().

3. Crear un efecto de "zebra".

Gracias al selector "odd", es posible crear tablas o listas con efecto de "zebra", es decir, con estilos intercalados:

Ejemplo: Crear efecto zebra en listas y tablas, agregando una nueva clase llamada "lineazebra".

$("tr:odd").addClass("lineazebra"); $("li:odd").addClass("lineazebra");

4. Verificar si un elemento tiene una clase especifica.

Con la función hasClass() es bastante sencillo saber si un elemento contiene una clase o no.

Ejemplo: Si un párrafo tiene un texto bajo la clase "cita", agregarle una nueva clase llamada "quote".

if ( $("p").hasClass("cita") ) {     $(this).addClass("quote"); }

5. Encontrar el elemento más cercano con alguna característica particular.

Con la función closest() se puede encontrar al elemento que cumpla con una característica en particular.

Ejemplo: Encontrar el imagen más cercano a un párrafo y obtener su id.

$("p").closest("div").attr("id");

Más snippets jQuey

La idea de los 5 sinippets listados es mostrar la punta del iceberg con jQuery, existen una gran cantidad de snippets que te ayuda a mejorar la experiencia de tus visitantes en tu sitio web:

• 50 jQuery Snippets That Will Help You Become A Better JavaScript Developer.
• Manipulating the DOM with jQuery: 10+ useful code snippets. (en el que se baso este post)
• Top 10 jQuery Snippets (including jquery 1.4)
• 6 jQuery snippets you can use to manipulate select inputs.
• Jquery en snipplr.
• 31 jQuery Snippets That Will Help Make You A JavaScript Pro.

Los videotutoriales parten de cero, así que con el conocimiento básico de html y css podrás seguirlos sin problema. En cada video se explica un poco la teoría del funcionamiento y se dan ejemplos prácticos de uso, lo que los hace bastante efectivos para aprender.

Videotutorial 1. Selectores JQuery.

Videotutorial 2: Filtros de selectores.

Videotutorial 3: Manejo de atributos.

Videotutorial 4: Funciones, manipulación de DOM.

Videotutorial 5: Métodos específicos a eventos.

Y el curso continuará, pueden estar pendientes directamente en el blog de Fernando Yanes. Otro material de mucha ayuda para aprender jQuery es:

• Documentación oficial. (en inglés).
• JQuery ya (en español).
• Chuleta o "acordeón" visual de jQuery.

1. Descarga jQuery y jQuery corners y haz el llamado dentro de las etiquetas <head> y </head>:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.corner.js"></script>

2. Se define la clase que creará las esquinas redondeadas de la siguiente forma:

<script>$(document).ready( function(){
  $('.redondas').corners();
});</script>

3. Y simplemente se aplica la clase a cualquier elemento HTML, por ejemplo a un típico selector DIV:

<div class="redondas">
	Contenedor con esquinas redondeadas.
</div>

Esta es la forma más sencillas de utilizar el script, pero tiene varias opciones de configuración, como definir el radio de curvatura general o para cada esquina o aplicar el script a botones de formulario que se pueden consultar en su sitio oficial.

Es soportado por la mayoría de los navegadores e inclusive por el iPhone.

El script y la librería te permitirán hacer desaparecer cualquier elemento de la página al cliquear en un botón. Por ejemplo, podemos colocar una nota en la barra lateral de la página con un aviso y colocar un botón para que desaparezca si le estorba al lector. (Ver demo)

1. Como siempre, lo primero es descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.

   <script type="text/javascript" src="jquery.js"></script>

2. Enseguida después del llamado, agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).

   <script type="text/javascript">
   $(document).ready(function(){
   
   	$(".contenedor .eliminar").click(function(){
   		$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
   	});
   
   });
   </script>

3. Ahora solo hay que usar las clases del script en la estructura html.

   <div class="contenedor">
   	<h2>Lorem ipsum 1</h2>
   	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   	<p><a href="">Regresar al tutorial</a></p>
   	<img src="eliminar.png" alt="cerrar" class="eliminar" />
   </div>

4. Y darle estilo a cada clase, es decir, al contenedor y al botón con los respectivos atributos generales.

   .contenedor {
   	margin:20px auto;
   	background:#F5E38E;
   	border:2px solid #EBCA4F;
   	padding:10px;
   	width:500px;
   	position:relative;
   }
   .contenedor .eliminar {
   	position: absolute;
   	top: 10px;
   	right: 10px;
   	cursor: pointer;
   }
   h2 { color:#ff0000; font-size:15px; }
   p { font-size:11px; padding: 0 0 11px; color:#333; }
   a { color:#ff8400; }
   body { font-family:verdana, arial; }

Las posibilidades son muchas y de hecho este es en esencia el mismo funcionamiento que tienen los menús de pestañas (tabs).

Demo | Descargar el ejemplo

Dar estilo a los links de diferentes tipos es muy sencillo con CSS3, pues permite recoger la extensión de cualquier archivo con una instrucción y darle estilos directamente. Por ejemplo:

a[href $='.pdf'] {
padding-right: 20px;
background: url(icono-pdf.gif) no-repeat right;
}

Desafortunadamente estos selectores no son soportados por IE6 (raro ¿verdad?) pero en Web Designer Wall nos dan una solución para hacerlo por medio de la librería jQuery.

1. Descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.

   <script type="text/javascript" src="jquery.js"></script>

2. Enseguida después del llamado, agregamos la función que hará que se le otorgue una clase a cada tipo de link y otro que abrirá los enlaces externos en una nueva ventana.

   <script type="text/javascript">
   $(document).ready(function(){
   
   //Definición de clases para cada tipo de archivo.
       $("a[@href$=pdf]").addClass("pdf");
   
       $("a[@href$=zip]").addClass("zip");
   
       $("a[@href$=doc]").addClass("doc");
   
   //Estilos y atributos a los enlaces externos.
       $("a:not([@href*=http://blogandweb.com])").not("[href^=#]")
         .addClass("externo")
         .attr({ target: "_blank" });
   
   });
   </script>

3. Ahora solo falta definir los estilo para cada tipo de archivo. Por ejemplo, agregándole un icono al inicio que lo identifique:

   .pdf {
   padding-left: 20px;
   background: transparent url(icono-pdf.png) left top no-repeat;
   }
   
   .zip {
   padding-left: 20px;
   background: transparent url(icono-zip.png) left top no-repeat;
   }
   
   .doc {
   padding-left: 20px;
   background: transparent url(icono-doc.png) left top no-repeat;
   }
   
   .externo {
   padding-left: 20px;
   background: transparent url(icono-ext.png) left top no-repeat;
   }

   Estos estilos los definimos dentro de la hoja de estilos (style.css) o dentro de la sección css.

4. Ahora cada vez que usemos un enlace con alguna de las extensiones definidas tendrán los atributos de la clase que le corresponde. Por ejemplo:

   <div id="enlaces">
   	<p><a href="documento.pdf">Archivo PDF</a></p>
   	<p><a href="documento.zip">Archivo ZIP</a></p>
   	<p><a href="documento.doc">Archivo DOC</a></p>
   	<p><a href="http://btemplates.com">BTemplates - enlace externo</a></p>
   	<p><a href="http://serturista.com">Ser Turista - enlace externo</a></p>
   	<p><a href="http://blogandweb.com/2008/05/06/dar-estilo-a-los-links-de-diferentes-tipos-con-jquery/">Regrasar al tutorial - enlace local</a></p>
   	<p><a href="#enlaces">Enlace local #</a></p>
   </div>

Demo | Descargar ejemplo