Necesito construir un div con un borde de esquina curvado, sin utilizar ninguna imagen en la esquina. ¿Es posible?Borde de esquina curvado para un div
No quiero insertar imágenes curvas en la esquina, ayúdenme con respecto a esto.
Pruebe esta biblioteca a cabo, lo hizo maravillas para mí! Es una solución probada de navegador cruzado.
Ese sitio parece [abajo] (http://www.downforeveryoneorjustme.com/http://www.curvycorners.net). [Última actualización del proyecto] (http://code.google.com/p/curvycorners/source/list) fue en marzo de 2011. El proyecto está alojado en [Google Code] (http://code.google.com/p/curvycorners /). –
Puede utilizar CSS para lograr esquinas redondeadas en los navegadores modernos ...
border-radius: 10px;
Esto se conoce como progressive enhancement. OMI, esto es mejor que las imágenes o los trucos de CSS con márgenes y bordes. A menos que sea absolutamente necesario tener esquinas redondeadas.
Si desea confiar en WebKit y Mozilla navegadores, puede utilizar los siguientes comandos CSS:
.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
}
detalles se pueden ver here.
información sobre la especificación CSS2 la frontera de radio se puede encontrar here
Estos lamentablemente no funcionan para decir.
podría ir una ruta de JavaScript para IE solo mediante el uso de niftycube que tiene el beneficio adicional de apoyar la nivelación de altura de la columna sin problemas.
Aquí hay una que escribí que te invitamos a utilizar si te gusta. Representa una caja de esquina redondeada de cualquier dimensión con un color de fondo pero no un borde alrededor de la caja entera. Es para fondos de páginas blancas, pero puede modificarse editando el color del borde en los estilos c1, c2 & c3.
.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}
<div class="rounded" style="width:200px;height:100px">
<div class="c1"></div><div class="c2"></div><div class="c3"></div>
<div class="inner">
-- Content Here --
</div>
<div class="c3"></div><div class="c2"></div><div class="c1"></div>
</div>
Utilizaría un plugin jQuery para manejar las esquinas redondeadas. Aquí está la lista de complementos de esquina redondeada disponibles en el sitio jQuery: http://plugins.jquery.com/taxonomy/term/189
revisa [esta publicación] (http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie) - una muy código CSS3 simple entre navegadores. – Shahar