crear borde con css

[manuelf0710]

lo que pasa es que necesito crear un diseño de un borde para un div que me de el efecto contrario de el siguiente codigo

-moz-border-radius-topright:20px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-bottomleft:20px;
-moz-border-radius-topleft:20px;
-moz-border-radius:20px;

/*crome*/
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-right-radius:20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-top-left-radius:20px;
-webkit-border-radius:20px;


el caso es que las curvas se generen hacia adentro, no se si es posible con solo css, el div tiene un borde de 2 px solid y necesito crearle ese efecto en las esquinas.

[webosiris]

hola, varias cosas:

1) de las 5 lineas que tienes, en realidad solo es necesaria la última. De la forma actual le estás indicando el valor para cada una de las 4 esquinas por separado, y luego para las 4 esquinas juntas, lo que evidentemente es un sinsentido.

2) Los navegadores viejos no soportaban la propiedad estándar y cada uno tenía su forma de hacer los bordes redondeados, por eso hay códigos para mozilla y para chrome de forma separada... pero desde hace un tiempo a esta parte ya ambos aceptan la propiedad estándar "border-radius", así que esas 10 líneas las puedes resumir en solo una:

Código CSS:

border-radius:20px;
 

3) Lo que quieres no se hace con border-radius porque no acepta valores negativos. Sin embargo hay una solución usando la propiedad gradient. Aquí tienes un ejemplo.