Borde redondeado en css

Sí es posible, pero con CSS 3, por ejemplo con la propiedad border-radius, ahora bien hay que recordar que no todos los navegadores entienden CSS3, y hasta que se normnalice su uso, se usa la propiedad de diferentes formas en diferentes navegadores. En FireFox se usa -moz-border-radius, y en Chrome o Safari, la propiedad es -webkit-border-radius. Para todos los demás casos, se puede usar javascript, sin necesidad de imágenes, puedes consultar Mootools o Nifty, este último muy ligero y específico para redondear bordes.

Depende de lo que quieras hacer, te propongo las siguientes opciones:

• Con divs e imágenes. Un poco laborioso, pero si te lo montas bien, cargas todas las imágenes de los bordes en un solo sprite y las posiciones correctamente, es la menos pesada.
• jquery.corner.js La 2ª más rápida de utilizar, y tendrás que cargar jquery (para motools hay otras librerías que hacen lo mismo). Lo malo es que para crear los bordes te crea micro-divs haciendo la forma de la curva.
• CSS3. Como bien han dicho tienes la propiedad css3 de border-radius (con sus aproximaciones para cada explorador: -moz, -ms, -webkit, -o). El problema es que exploradores antiguos como el IE8 siguen teniendo un alto grado de utilización, por lo que no te lo recomiendo.

Para Internet Explorer hay algunas implementaciones hechas. De las que que he probado, la que más me gusta es la de css3pie: http://css3pie.com/

Un saludo.

un ejemplo:

{-moz-border-radius-topleft:1.9em ;-webkit-border-top-left-radius:1.9em ;border-top-left-radius:1.9em ;}

y sustituir left por right y top por bottom. se puede poner varios estilos en una sola etiqueta class, ejemplo:

class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"

estos ejemplos los he sacado de la librería JQuery, es decir puedes poner un estilo para la esquina superior izquierda y derecha y para la esquina inferior inquierda y derecha en una sola etiqueta class(como te indicado).

y para poner un degradado de fondo con el siguiente estilo:

.ui-btn-active{
border:1px solid #000000 ;
background:#6CA6D4 ;
font-weight:bold;
color:#000 ;
cursor:pointer;
text-shadow: 0    -1px    1px   #fff ;
text-decoration:none;
background-image:-webkit-gradient(linear,left top,left bottom,from( #b6a35c ),to( #b6a35c1 )); 
background-image:-webkit-linear-gradient(top,#b6a35c,#b6a35c1 ); 
background-image:   -moz-linear-gradient(top,#b6a35c,#b6a35c1 );
background-image:    -ms-linear-gradient(top,#b6a35c,#b6a35c1 );
background-image:     -o-linear-gradient(top,#b6a35c,#b6a35c1 );
background-image:        linear-gradient(top,#b6a35c,#b6a35c1 );
font-family:Helvetica,Arial,sans-serif  ;}

bueno los estilos, los colores, el tipo de fuente y lo de más lo puedes cambiar tu a tu gusto, esto funciona tanto en web normales como para moviles.

un saludo

Bordes redondeados: la propiedad border-radius permite definir bordes redondeados en las esquinas. Para navegadores basados en WebKit (Chrome o Safari) se ha de usar -webkit-border-radius, para Firefox: -moz-border-radius

También se puede hacer usando bordes con imágenes, y tenemos lo siguientes atributos (usando el prefijo -moz- o -webkit- según el caso)

border-image-source: Para indicar la URL de la imagen que vamos a utilizar como borde. border-image-slice: Indica el espacio de la imagen que será visible como borde, en los cuatro lados del elemento, es decir, top, right, bottom y left.

border-image-width: Para indicar la anchura del borde.

border-image-outset: indica el área en la que la imagen de borde se extiende más allá del área del elemento, en los 4 lados del mismo.

border-image-repeat: Permite marcar si se desea o no que se repita la imágen del borde haciendo un mosaico o si se desea que se estire, etc.

border-image: Se utilizaría como una manera resumida de especificar varios atributos de borde.