En CSS, existen dos tipos de borde diferentes: borde y contorno. Mientras que border indica siempre un marco rectangular, los marcos outline introducidos en CSS2 están pensados para áreas no rectangulares. Y hay otra diferencia: Con el contorno, el borde se sitúa fuera del marco, lo que significa que a un elemento se le puede asignar tanto un marco con borde como un borde con contorno.
Las definiciones de borde presentadas en este tutorial son especialmente interesantes para los elementos que forman su propio párrafo. En principio, sin embargo, también pueden aplicarse a otros elementos.
Definición de bordes
La apariencia de todo el borde alrededor de un elemento puede definirse con border.
La propiedad general border es un resumen de los siguientes valores, que se discutirán en detalle más adelante:
- border-color
- estilo-borde
- ancho-borde
Los valores de las propiedades individuales están separados entre sí por espacios. El orden en que se especifican las propiedades es irrelevante. También hay cuatro subpropiedades para border, que se pueden utilizar para especificar el color del borde, el grosor del borde y el tipo de borde para páginas de elementos individuales.
- border-top - borde superior
- border-right - borde derecho
- border-bottom - borde inferior
- border-left - borde izquierdo
El siguiente ejemplo muestra el uso de border. Esta definición crea un borde de tres puntos de ancho, negro y sólido.
<p style="border:3pt solid #000000;"> Bienvenido </p>
El resultado en el navegador:
El color del borde
El color del borde se determina mediante border-color. Se permiten los siguientes valores
- transparent - borde transparente
- Valor del color
Si sólo se especifica un valor, éste se aplica a todas las páginas del marco. Para definir diferentes colores para las páginas individuales, introduzca varios valores, cada uno separado por espacios.
- Dos valores - el primer valor para la parte superior e inferior, el segundo para los colores izquierdo y derecho del marco.
- Tres valores - el primer valor para la parte superior, el segundo para la izquierda y la derecha, el tercero para el color del marco inferior.
- Cuatro valores - el primer valor para la parte superior, el segundo para la derecha, el tercero para la parte inferior y el cuarto para el color del borde izquierdo.
También se pueden utilizar las siguientes subpropiedades de borde:
- border-top-color - color del borde superior
- border-right-color - color del borde a la derecha
- border-bottom-color - color del borde inferior
- border-left-color - color del borde izquierdo
Un ejemplo:
<p style="border-color: #ffff00; border-width: 3px; border-style: solid; padding: 2px"> PSD-Tutorials.de </p>
Y aquí está el resultado en el navegador:
El estilo de línea
El estilo de línea del marco se puede definir a través de border-style.
A continuación encontrará una lista de las posibles variantes de borde:
- none - borde invisible
- punteado - punteado
- discontinuo - discontinuo
- sólido - sólido
- doble - doble sólido
- ranura - línea 3D
- cresta - línea 3D
- inserción - línea 3D
- inicio - línea 3D
A continuación se muestra un ejemplo del aspecto de los tipos de marco
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutorials.de</title> <style> p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> </head> <body> <p class="none">ninguno</p> <p class="dotted">puntos</p> <p class="dashed">guiones</p> <p class="solid">sólido</p> <p class="double">dobledoble</p> <p class="groove">ranura</p> <p class="ridge">cresta</p> <p class="inset">insercióninset</p> <p class="outset">outset</p> <p class="hidden">hidden</p> </body> </html>El resultado en el navegador:
Si sólo se especifica un valor, se aplica a todas las páginas del marco. Para definir tipos de marco para las páginas individuales, escriba varios valores, cada uno separado por espacios.
- Dos valores - el primer valor para la parte superior e inferior, el segundo para el tipo de marco izquierdo y derecho.
- Tres valores - el primer valor para el tipo de marco superior, el segundo para los tipos de marco izquierdo y derecho, el tercero para el tipo de marco inferior.
- Cuatro valores - el primer valor para la parte superior, el segundo para la derecha, el tercero para la parte inferior y el cuarto para el tipo de borde izquierdo.
También se pueden utilizar las siguientes subpropiedades de borde:
- border-top-style - estilo del borde superior
- border-right-style - estilo del borde a la derecha
- border-bottom-style - tipo de borde en la parte inferior
- border-left-style - tipo de borde a la izquierda
He aquí otro ejemplo:
<p style="border-bottom-style: dashed;">Borde discontinuo </p>
Y así es como se ve en el navegador:
Establecer el ancho del borde
El ancho del borde viene determinado por border-width.
- Especificación de la longitud
- fino - marco fino
- medium - marco medio-grueso
- thick - borde grueso
Si sólo se especifica un valor, se aplica a todas las páginas del elemento. Hay dos formas de especificar diferentes grosores de marco para páginas individuales. En la primera opción, se anotan varios valores separados por espacios.
- Dos valores - el primer valor para la parte superior e inferior, el segundo para la anchura izquierda y derecha del marco.
- Tres valores - el primer valor para la parte superior, el segundo para la izquierda y la derecha, el tercero para el ancho del marco inferior.
- Cuatro valores - el primer valor para la parte superior, el segundo para la derecha, el tercero para la parte inferior y el cuarto para el ancho del marco izquierdo.
También puede utilizar las siguientes subpropiedades de borde:
- border-top-width - grosor del borde en la parte superior
- border-right-width - grosor del borde a la derecha
- border-bottom-width - grosor del borde en la parte inferior
- border-left-width - grosor del borde izquierdo
Un ejemplo:
<p style="border-width:2px;border-style: dotted;"> Bienvenido </p>
El color del borde del contorno
El color del borde se define mediante la propiedad outline-color. La especificación es idéntica a border-color.
- invert - se invierte un color. Este color se crea invirtiendo todos los bits de un valor de color hexadecimal.
- Especificación del color
Un ejemplo:
<p style="outline-width: medium; outline-style: solid; outline-color: blue;"> PSD-Tutorials.de </p>
Así es como se ve en el navegador:
El tipo de marco para el contorno
La especificación outline-style determina el tipo de contorno. Se permiten los mismos valores que para border-style.
- none - borde invisible
- punteado - punteado
- discontinuo - discontinuo
- sólido - sólido
- doble - doble sólido
- ranura - línea 3D
- cresta - línea 3D
- inserción - línea 3D
- inicio - línea 3D
Un ejemplo:
<p style="outline-style:solid;outline-width:2px; outline-color:red;"> PSD-Tutorials.de </p>
El grosor del marco para el contorno
La especificación outline-width es idéntica a border-width. También define el grosor del borde. Para crear una línea de borde visible, combine siempre outline-width con outline-style.
- medium - borde de grosor medio
- fino - marco fino
- grueso - marco grueso
- Especificación de longitud - determina el grosor del marco
Un ejemplo:
<p style="outline-width: thin;outline-style: solid; outline-color: red;"> Bienvenido </p>
Y al igual que con border, también existe una propiedad general para los outline frames.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>PSD-Tutoriales.de</title> <style> p { border:red solid thick; outline:green dotted thick; } </style> </head> <body> <p>¡Bienvenidos a PSD-Tutorials.de!</p> </body> </html>
Esto resume entonces las siguientes propiedades
- outline-anchura
- outline-estilo
- outline-color
El principio aquí es entonces idéntica a la de la propiedad general frontera.
