Utilizo etiquetas div para definir áreas dentro de mis páginas web. Configuro todas las cosas obvias como fondo, tamaño, relleno, etc. Pero todo es muy cuadrado.¿Cómo usar solo CSS para redondear las esquinas de mi área de etiquetas div?
¿Cómo puedo usar solo CSS para redondear las esquinas?
Utilizaría la propiedad border-radius. Sin embargo, esto solo es compatible con CSS3, que ningún navegador implementa todavía. Si solo necesita que funcione en un par de navegadores, podría usar -webkit-border-radius y -moz-border-radius, lo que le permitiría funcionar en Safari y Firefox, respectivamente.
Si no se opone al uso de imágenes. Este es el método que ideé para making rounded borders.
-moz-border-radius le conseguirá esquinas redondeadas en todas las versiones de Firefox. Más información útil en el Sitepoint CSS Reference.
border-radius obtendrá las esquinas redondeadas en Safari 3. Más información sobre border-radius en el CSS 3 Spec.
Si con "solo CSS" quiere decir "sin JavaScript", seguramente puede agregar imágenes de fondo con esquinas redondeadas a sus elementos. Es posible que necesite un marcado adicional en este caso, dependiendo de la flexibilidad que necesite.
Teniendo en cuenta que no se puede usar multiple background images todavía, creo que el uso de una sola imagen es la mejor única opción CSS.
Si puede utilice JavaScript, entonces es posible que desee comprobar Nifty Corners Cube. Menciono esto porque funciona incluso en la parte superior de las imágenes y admite transparencia.
Aquí hay un documento HTML simple para demostrar cómo lograrlo solo a través de CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style>
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}
</style>
</head>
<body>
<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
Content Area Content Area Content Area Content Area Content Area Content Area
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>
</body>
</html>
Enlace al original: http://blog.yosle.com/2007/09/20/css-round-corners/
pedir a Google sobre "CSS esquinas redondeadas sin imágenes" y encontrará muchos, muchos ejemplos de cómo hacerlo.
Personalmente, me gustan los métodos basados en la manipulación de márgenes para dibujar la curva línea por línea, a pesar de la cantidad de ruido que producen en la fuente de la página, porque son los más flexibles y pueden dibujar cualquier forma de borde . Si solo está interesado en las esquinas redondeadas reales (es decir, usando un arco circular de 90 grados), hay una solución mucho más compacta basada en algunos trucos con una bala cuidadosamente posicionada.
Enlace para engañar viñeta: http://www.cssplay.co.uk/boxes/curves .html –
Hay un tutorial en http://www.sitepoint.com/blogs/2005/08/19/dom-foolery-with-images/ que explica cómo establecer bordes redondeados en las imágenes. Puede ser útil ya que la imagen se establece como fondo de un div. Aunque necesitará usar otras imágenes y un javascript. El código de javascript puede reducirse si usa JQuery. o/
echamos de menos esa característica en los navegadores ...; ( – vaske
Si bien esta respuesta es correcta, no veo cómo es práctico para los desarrolladores web/diseñadores de hoy –
Ver mi respuesta a continuación una respuesta que va a funcionar. hoy en todos los navegadores –