Borders redondeados sin usar imagenes y compatible con navegadores

[DiifoOtz]

Hola buenas tengo una pequeña duda. Es sobre la propiedad border-radius
la cual necesito usar para hacer un campo de busqueda redondeado.

Seria bastante sencillo hacerlo con alguna imagen pero quiero que en un futuro poder animarlo con animate() de jquery. y otra dificultad seria que solo seran los bordes redondeados en las esquinas izquierdas.

ee usado el siguiente codigo en Html y CSS

Código CSS:

#text-search{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
    -moz-border-top-left-radius:6px;
    -moz-border-bottom-left-radius:6px;
    -webkit-border-top-left-radius:6px;
    -webkit-border-bottom-left-radius:6px;
    background:#171717 url(images/search-bg.png) repeat-x;
    width:167px;
    height:28px;
    float:right;
    }
 

la imagen del background es una especie de degradado con luz. Como ven agregue el -moz y el -webkit para poder aumentar el rango de compatibilidad

ahora bien también lo hice mediante jquery para poder estar seguro asi que con esto es seguro de que sea soportado por todos los navegadores ???

Código Javascript:

$(document).ready(function(){
    $('#text-search').css({
        'border-top-left-radius': '6px',
        'border-bottom-left-radius': '6px'
    });
});
 

gracias por leer. Soy nuevo en esto

[memoadian]

¿Pues podrías probarlo en todos los navegadores no?

[DiifoOtz]

Iniciado por memoadian

¿Pues podrías probarlo en todos los navegadores no?

En las versiones actuales de todos los navegadores funciona muy bien el detalle es en las versiones anteriores como IE6, IE7 e IE8

[memoadian]

Pues yo daría por muerto IE6 e IE7

pero si quieres ver como se ve

http://browsershots.org/ ahí hay varias capturas desde diferentes navegadores.

[DiifoOtz]

Ok, gracias creo que me servira

[disenoexpress]

IE6, creo recordar que no tenia compatibilidad con border-radius. Pero no desdeñes a IE8, que sigue funcionando en miles de ordenadores con windows XP.Para navegadores realmente viejos había una librería javascript llamada DD_Roundles. Puedes echarle un vistazo en http://www.dillerdesign.com/experiment/DD_roundies/