Creando esquinas redondeadas usando CSS

Este documento pretende:

• Crear un diseño de bordes nítidos y esquinas redondeadas usando CSS , evitando el uso de tablas.
• Que el código del CSS y el XHTML sea validado por la W3C y que además sea semánticamente lógico.
• Que el diseño sea totalmente fluido o sea que se adapte a cualquier resolución del usuario.
• Compatible con la mayoría de los navegadores.

Los requisitos para dominar cada uno de estos pasos son los siguientes:

• Saber crear un documento XHTML bien estructurado.
• Saber aplicar CSS a documentos XHTML usando clases.

Primero que nada vamos a crear la imagen inicial de nuestro borde y sus esquinas. Debes saber manejar algún programa de diseño como Adobe Photoshop , Macromedia Fireworks o Paint Shop Pro . La siguiente imagen te dará una idea más amplia de este proceso. Además la puedas usar como ejemplo para que practiques este tutorial.

Antes de continuar con el código necesitamos cortar la imagen. Parte del efecto se debe a la forma en que cortamos la imagen y como se posicionan estos pedazos utilizando cierto código de CSS . La imagen debe ser cortada en 8 partes:

Esquina inferior izquierda:
Esquina inferior derecha:
Esquina superior izquierda:
Esquina superior derecha:
Borde inferior:
Borde superior:
Borde izquierdo:
Borde derecho:

Ya tenemos todo lo necesario para crear el efecto. Veamos ahora el código al cual le vamos aplicar la decoración.

Usuarios que han visto este tema también han visto...

- Usando CSS en tablas
- Efectos sobre elementos Input
- Insertar una imagen de fondo en un TEXTAREA
- CSS: Etiquetas
- Fondo para campos textarea en CSS

- Versión imprimible de este documento

- Enviar por e-mail este documento