tabla redondo redondeados redondeado radius online hacer div curvar como bordes html css

html - redondo - div css generator



¿Cómo usar solo CSS para redondear las esquinas de mi área de etiquetas div? (6)

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 puedo usar solo CSS para redondear las esquinas?

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/

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 /

Pregunta a google sobre "css esquinas redondeadas sin imágenes" y encontrarás 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 algún truco con una bala cuidadosamente posicionada.

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 puede utilizar varias imágenes de fondo todavía, creo que usar una sola imagen es la mejor opción de CSS .

Si puede usar JavaScript, entonces tal vez quiera echar un vistazo a Nifty Corners Cube . Menciono esto porque funciona incluso en la parte superior de las imágenes y admite transparencia.

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 te opones a usar imágenes. Este es el método que ideé para hacer bordes redondeados .