Los bordes se utilizan en páginas HTML para demarcar y resaltar contenido. Cuando hay mucha información en una página y desea llamar la atención del usuario sobre partes específicas, utilice bordes alrededor de ese contenido. En este artículo sobre fronteras en CSS, analizaré los siguientes temas:
- Cuándo usar Borders
- Fronteras en CSS
- Atributos del borde CSS
- Valores predeterminados para atributos de borde
- Definir bordes en taquigrafía
- Puntos a tener en cuenta al diseñar bordes en CSS
Cuándo usar Borders
La práctica estándar es usar etiquetas de borde CSS para definir bordes en páginas HTML para:
- Alrededor de títulos importantes
- Para resaltar postscript o notas importantes
- Para adjuntar fotografías, ilustraciones, citas de personas, videos
- Para llamar la atención sobre precios, cronogramas o información tan significativa
Es posible que desee leer sobre el antes de continuar con el aprendizaje de los bordes CSS.
Para obtener un tutorial completo de CSS, visite Tutorial de Edureka CSS para principiantes . Obtendrá un excelente aviso sobre la forma en que se utilizará CSS para aumentar el diseño web HTML.
Fronteras en CSS
Los bordes CSS se pueden asignar a diferentes secciones de la página HTML, ya sea para incluir encabezados o párrafos. Comencemos con un ejemplo. Aquí definimos un borde alrededor del encabezado y otro borde alrededor del texto del párrafo.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}¡Borde el párrafo también!
Atributos del borde CSS
Los bordes CSS tienen 3 atributos principales en su
- estilo:losestiloEl atributo define el patrón del borde.
- color: El color puede ser cualquiera del conjunto definido por colores CSS.
- anchura: El ancho se utiliza para variar el grosor del borde y hacerlo más prominente.
En el ejemplo anterior, vimos que solo se define un atributo de borde, que es su estilo. Los otros atributos cuando no están definidos toman valores predeterminados. Hay otro atributo llamado radio, que se usa con menos frecuencia. Se utiliza para redondear los bordes del borde.
- estilo de borde atributo
| Estilo | Descripción |
| estilo de borde: sólido | |
| estilo de borde: doble | |
| estilo de borde: ranura | |
| estilo de borde: cresta | |
| estilo de borde: recuadro | |
| estilo de borde: comienzo | |
| estilo de borde: ninguno | |
| estilo de borde: oculto | |
| estilo de borde: punteado | |
| estilo de borde: discontinuo |
Observará que también hay una opción 'sin borde' y 'borde oculto'. Un desarrollador puede simplemente evitar definir un borde, ¿por qué definirlo explícitamente como un 'borde oculto'? Esto se hace por motivos de uso del espacio y alineación con otros elementos de la página.
Los estilos de borde también se pueden mezclar dentro de un elemento. Para ello, los 4 lados del borde individuales se pueden definir por separado con diferentes estilos. Esto se puede hacer de 2 formas. Defina los 4 lados en una sola etiqueta. En este caso, el recuento comienza desde la línea superior y luego se mueve en el sentido de las agujas del reloj. Alternativamente, cada uno de los 4 límites también se puede definir en etiquetas individuales. Ambos casos se muestran en el siguiente ejemplo.
| Estilo | Descripción |
| estilo de borde: doble sólido discontinuo punteado borde-estilo-superior: punteado border-right-style: discontinuo estilo de borde inferior: sólido borde-estilo-izquierdo: doble |
- color del borde atributo
El atributo de color de un borde se puede establecer de varias formas. Esto es similar a configurar el color de otros elementos. Los colores se pueden configurar mediante uno de los siguientes métodos:
- nombre - especificar un nombre de color, como 'azul'. ¡También puede probar algunas opciones de colores elegantes como 'BlanchedAlmond'!
- Maleficio - especificar un valor hexadecimal, como '# ff0000'
- RGB - establecer el código RGB. Por ejemplo, rgb (255,255,0) significa amarillo.
- ajuste - como 'transparente' u 'opaco'
- ancho del borde atributo:
La propiedad de ancho, como su nombre indica, define el grosor de los 4 lados del borde. Si se define un valor, es para todos los lados; de lo contrario, también se pueden establecer valores de ancho individuales.
El ancho se puede especificar en cualquiera de las unidades estándar, como píxeles ('px'), puntos ('pt') o centímetros ('cm'). También puede especificar el ancho utilizando valores predefinidos de 'grueso', 'delgado' y 'medio'.
| Estilo | Descripción |
| ancho del borde: 10px | |
| ancho del borde: 0,1 cm | |
| ancho del borde: medio |
- radio de borde atributo
El propósito de definir el radio es obtener esquinas redondeadas para el borde. El factor de radio define el grado de redondez. Cuanto mayor es el valor, más curvas se vuelven las esquinas. Como práctica estándar, los valores de radio se mantienen entre 1 y 3 veces el ancho del borde.
El siguiente código generará:
que son los tokens en java
ancho del borde: 10px
radio del borde: 30px
Valores predeterminados para atributos de borde
El único atributo obligatorio es el estilo . Si falta el estilo, el borde no aparecerá.
Si no se especifica el color, el color del elemento subyacente se toma como valor predeterminado. Por ejemplo, si el color del texto de un párrafo se define como 'azul', el color del borde predeterminado también sería azul. En caso de que no haya una definición de color ni siquiera para el elemento, el color predeterminado es 'negro'.
El valor predeterminado para el ancho es 'medio'.
Definir bordes en taquigrafía
Algunos desarrolladores prefieren definir los atributos del borde en una etiqueta concisa de una línea. Este formato abreviado ayuda a minimizar las líneas de código y los desarrolladores expertos prefieren este formato. Se recomienda utilizar el formato abreviado cuando la definición del borde es simple y bastante estandarizada. Sin embargo, si necesita resaltar cada lado del borde con un estilo diferente, debe ceñirse al formato de definición de etiquetas individuales.
Se utiliza el siguiente código:
estilo de borde: discontinuo
color del borde: verde
ancho del borde: 5px
borde: verde punteado 5px
Puntos a tener en cuenta al diseñar bordes en CSS
No use demasiados bordes en una página, puede distraer y dificultar la concentración del usuario.
Es importante mantener la coherencia en el estilo y los colores de los bordes. Los elementos del mismo nivel de jerarquía en una página deben tener un estilo de borde y un ancho similares para lograr uniformidad. Por ejemplo, si párrafo se define con un borde sólido y un ancho de 5px, mantenga este formato en otros párrafo elementos durante el diseño del sitio web.
Cíñete a un estilo de definiciones de etiquetas. Algunos desarrolladores se sienten cómodos con las definiciones de atajos con todos los valores asignados a un solo frontera etiqueta. Algunos otros prefieren una lista explícita de todas las etiquetas en cuanto a ancho, color y estilo. La convención es que cuando se requieren decoraciones de borde elaboradas en una página, las etiquetas individuales se enumeran por separado. Esto ayuda durante la depuración de tales definiciones de borde personalizadas. Para casos normales, bastaría con una definición de acceso directo.
Espero que haya encontrado la información que buscaba en los bordes CSS, ywCon esto, llegamos al final de este artículo Borders in CSS.
Mira nuestro que viene con capacitación en vivo dirigida por un instructor y experiencia en proyectos de la vida real. Esta capacitación lo capacita en habilidades para trabajar con tecnologías web de back-end y front-end. Incluye capacitación en desarrollo web, jQuery, Angular, NodeJS, ExpressJS y MongoDB.
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios del blog 'Bordes en CSS' y nos comunicaremos con usted.