¿Forma de cápsula usando un radio de borde sin un ancho o altura establecidos?

Sí, esto es posible (aunque solo he probado en Chromium 28/Ubuntu 12.10):

div {
    /* this is the only relevant part: */
    border-radius: 20%/50%;

    /* this is irrelevant, and just so the element can be visualised/displayed: */
    width: 50%;
    height: 5em;
    margin: 2em auto;
    background-color: #000;
}

JS Fiddle demo .

La información importante es, obviamente, el valor de propiedad 20%/50%; el 20% es la 'longitud horizontal' del radio, mientras que el 50% es la 'longitud vertical'; el uso de dos mediciones diferentes da una curva elíptica al borde, en lugar de una sola medición, que produce el radio más circular. Obviamente, esto requiere una cierta cantidad de adaptación a sus propias necesidades

Referencias:

• border-radius (at Mozilla Developer Network ).
• Módulo Fondos y Bordes CSS Nivel 3: 5.1. Radios de curva: las propiedades' border-radius ' .

Esto es lo que he encontrado que funciona bien:

border-radius: 50vh;

El soporte del navegador se ve bien para eso ahora también.

Para explicar, el vh es una "Unidad de vista" que calcula la altura de la vista en píxeles. Al decir 50vh para declarar el radio del borde, es 50% * (Viewport Height)px.

Si utiliza porcentajes, se necesita el ancho del elemento para calcular el radio, por lo que, para tener el elemento en forma de cápsula, debe pasar a la propiedad border-radius la mitad de la altura del elemento, utilizando unidades. Por eso funciona cuando se pasa 500px. No por la cantidad, sino porque estás usando px como unidades.

.capsule {
    width         : 200px;
    height        : 50px;
    border-radius : 25px;
}

Aquí tienes un ejemplo en CodePen. Intente jugar con variable $proportion para ver el efecto en el elemento radio.

Espero que ayude:)

Para hacer una forma de cápsula en un elemento o div, el valor de border-radius debe ser la división de 2 de la altura de un elemento.

Por ejemplo, aquí usé la función calc para una mejor comprensión:

div{
 width: 200px;
 height: 100px;
 border-radius: calc(100px / 2); /*height of the element divided by 2 */
}