Ejemplos de marcos CSS. CSS: borde. Límites de elementos. Cómo hacer múltiples bordes en un elemento html

Esta propiedad crea un borde alrededor de un elemento. Puede leer más sobre esta propiedad en el enlace, y en este artículo esquema general Describiré cómo funciona. Esta información será suficiente para entender cómo crear marcos usando CSS.

La sintaxis de la propiedad de borde es simple: borde: 1px negro sólido; . Esta propiedad tiene tres significados:

• 1px - grosor del borde.
• sólido - tipo de marco, sólido es línea continua, doble - doble sólido, discontinuo - punteado. Hay varios otros tipos de bordes; puede encontrar información sobre ellos aquí: Borde CSS.
• negro: establece el color del borde. Los colores se pueden especificar por nombre, valores válidos están aquí: tabla de colores CSS, o por código hexadecimal. Cómo hacer esto se describe en el artículo: colores en CSS.

marco de texto CSS

A continuación se muestra un ejemplo del uso de la propiedad de borde para crear un borde de un píxel de ancho y negro:

A este párrafo se le asigna la clase ejemplo-1.

En este ejemplo también usamos la propiedad relleno CSS, o relleno. Esta propiedad especifica la cantidad de sangría desde el texto hasta el trazo (el borde del elemento).

Veamos otro ejemplo sencillo, sólo para entenderlo. Creemos un marco de tres píxeles de ancho en rojo y sin relleno(Propiedad de relleno CSS).

A este párrafo se le asigna la clase ejemplo-2.

Como vemos, sin interior. relleno el marco de texto parece tener cuernos.

Cómo hacer un marco de imagen en CSS

Los marcos para imágenes se configuran de manera similar usando la propiedad de borde. hagamos un marco verde 4 píxeles de espesor para la imagen.

Ejemplo-img (borde: 4px verde sólido;)

Así es como funcionará este código:

Cómo redondear las esquinas de un marco en CSS

Redondear las esquinas de un borde en CSS se realiza mediante la propiedad border-radius. Esta propiedad se introdujo en CSS3 y funciona en todos navegadores modernos.

La propiedad border-radius puede tener de uno a cuatro valores. Si hay un valor, establece el grado de redondeo de todas las esquinas. Demos un ejemplo de cómo funcionará esta propiedad con un valor.

Ejemplo 3 (borde: 1 px negro sólido; radio del borde: 15 px; relleno: 10 px;)

Así es como funciona:

propiedad de radio de borde: 15px.>

Si el bloque no tiene borde, entonces hay un borde ancho de borde: 0; , entonces el área rellena se redondeará color de fondo(propiedad de color de fondo). He aquí un ejemplo:

Ejemplo-4 (ancho de borde: 0; // aunque este valor es 0 por defecto color de fondo: #DDD; radio de borde: 15px; relleno: 10px;)

Así es como funciona este ejemplo:

propiedad de radio de borde: 15px.>

Como escribí anteriormente, la propiedad border-radius se puede establecer entre uno y cuatro valores. La siguiente tabla describe cómo funcionará cada combinación de valores.

Para la propiedad border-radius, los valores se pueden especificar como porcentajes.

Dibujemos un círculo en CSS. Para hacer esto, tome un bloque cuadrado de 100 por 100 píxeles y redondeelo. Esquinas CSS radio-frontera: regla del 50%.

Ejemplo 5 (ancho: 100 px; alto: 100 px; color de fondo: #F00; radio del borde: 50%;)

Así es como funciona este ejemplo:

Esto cubre completamente el tema de "marcos en CSS". ¡Buena suerte aprendiendo CSS!

Para controlar el borde de un elemento, utilice el universal. propiedad fronteriza. Esta propiedad le permite establecer el grosor, el estilo y el color del borde de un elemento en una sola declaración.

Estas tres propiedades (grosor del borde, estilo del borde y color) se pueden configurar en una sola declaración. He aquí un ejemplo:

Puede especificar un estilo de borde solo en un lado de un elemento. Para hacer esto, use las propiedades border-top (borde superior), border-right (borde derecho), border-bottom (borde inferior), border-left (borde izquierdo).

En este ejemplo, cada lado del bloque tiene un grosor, estilo y color de borde diferente.

Piensa en cómo podrías crear una forma como esta usando CSS:

Los valores de los bordes (grosor, estilo y color) se pueden configurar por separado mediante propiedades especiales.

• estilo de borde - estilo de borde.
• ancho de borde - ancho del borde.
• color del borde - color del borde.

Consideremos cada uno de los valores por separado.

propiedad estilo frontera Estilo de borde.

La propiedad border-style establece el estilo del borde. En CSS, en diferencias HTML, el borde de un elemento no solo puede ser sólido. Se aceptan los siguientes valores para el estilo de borde:

1. ninguno: sin borde (predeterminado).
2. sólido - borde sólido.
3. doble - doble borde.
4. discontinuo - borde punteado.
5. punteado: un borde formado por una serie de puntos.
6. cresta - borde de "cresta".
7. surco - borde "surco".
8. recuadro: borde deprimido.
9. principio - borde extruido.

Ejemplos de cómo se ven.

sin fronteras (ninguna)

borde sólido

doble borde

borde de una serie de puntos (punteado)

borde discontinuo

borde de ranura

borde de cresta

borde sangrado (recuadro)

borde extruido (inicio)

Por cierto, si configura el color del borde en negro para el marco de la cumbrera, obtendrá este resultado.

Un bloque div con borde negro y estilo de cresta.

El marco parece sólido, pero eso se debe a que el estilo de cresta se crea agregando un efecto de sombra negra, y el efecto negro está activado. marco negro no visible.

con la ayuda propiedades de estilo de borde El estilo del borde se puede configurar no sólo para todos los lados del bloque. Es posible establecer varios valores para una propiedad de estilo de borde, dependiendo de la cantidad de valores, se asignará el estilo de borde; numero diferente lados del bloque. Puede establecer uno, dos, tres o cuatro valores. Veamos ejemplos para cada caso.

Un valor (sólido): el estilo del borde se establece para todos los lados del bloque.

Dos valores (doble sólido): el primer valor establece el estilo para los lados superior e inferior, el segundo para el lateral.

Tres valores (sólido con doble punto): el primer valor para el lado superior, el segundo para los lados y el tercero para la parte inferior.

Cuatro valores (sólido, doble punto y rayado): cada valor para un lado en el sentido de las agujas del reloj comenzando desde arriba.

La propiedad del ancho del borde. Grosor del borde.

Para establecer el ancho del borde de un elemento, use la propiedad border-width. El grosor del borde se puede establecer en cualquier unidades absolutas medidas, por ejemplo en píxeles.

Al igual que la propiedad de estilo de borde, la propiedad también se puede establecer entre uno y cuatro valores. Veamos ejemplos para cada caso.

Código de ejemplo:

También para la propiedad de ancho de borde hay valores en el formulario palabras clave. Hay tres en total:

• delgado - borde delgado;
• medio - espesor medio;
• grueso - borde grueso;

Grosor del borde: fino.

Grosor del borde: medio.

Grosor del borde: grueso.

La propiedad de color del borde. Color del borde.

Para controlar el color del borde, utilice la herramienta de color del borde. Los colores de esta propiedad se pueden configurar utilizando cualquier método descrito en el artículo "Colores en CSS", a saber:

• Notación hexadecimal (#ff00aa) del color.
• formato RGB-rgb(255,12,110). formato RGBA para CSS3.
• formatos HSL y HSLA para CSS3.
• Nombre del color, por ejemplo negro. Lista completa Los nombres de los colores se proporcionan en la tabla de nombres de colores CSS.

propiedad de color de borde También puede tener de uno a cuatro valores y los trata de manera similar a las propiedades anteriores.

Un valor (rojo).

Dos valores (rojo negro).

Tres valores (rojo negro amarillo).

Cuatro valores (rojo negro amarillo azul).

Ahora volvamos al problema planteado anteriormente y dibujemos una figura:

Aquí está el código que dibuja dicha figura, sólo que de mayor tamaño:

Establecer valores para los lados por separado

Se mencionó anteriormente que puede especificar valores de propiedad de borde solo para un lado de un bloque. Existen propiedades para estos fines:

• borde superior
• border-right (borde derecho)
• borde inferior
• border-left (borde izquierdo)

Permítanme recordarles que para todas las propiedades se especifican tres valores (espesor, estilo y color) en cualquier orden. Pero existen propiedades que le permiten establecer el grosor, el color y el estilo de cada lado por separado. La escritura de estas propiedades se deriva de lo anterior.

Opciones de borde superior (borde superior).

• border-top-color: establece el color del borde superior del elemento.
• border-top-width: establece el grosor del borde superior del elemento.
• border-top-style: establece el estilo del borde superior del elemento.

Opciones de borde derecho (borde-derecho).

• border-right-color: establece el color del borde derecho del elemento.
• border-right-width: establece el grosor del borde derecho del elemento.
• border-right-style: establece el estilo del borde derecho del elemento.

Opciones de borde inferior (borde inferior).

• border-bottom-color: establece el color del borde inferior del elemento.
• border-bottom-width: establece el grosor del borde inferior del elemento.
• border-bottom-style: establece el estilo del borde inferior del elemento.

Opciones de borde izquierdo (borde-izquierda).

• border-left-color: establece el color del borde izquierdo del elemento.
• border-left-width: establece el grosor del borde izquierdo del elemento.
• border-left-style: establece el estilo del borde izquierdo del elemento.

Un ejemplo de uso de estas propiedades:

La propiedad del radio de borde. Redondear las esquinas del borde.

La propiedad border-radius está destinada a redondear las esquinas de los bordes de un elemento. Esta propiedad se introdujo en CSS3 y funciona correctamente en todos los navegadores modernos excepto Explorador de Internet 8 (y versiones anteriores).

Los valores pueden ser cualquier número utilizado en CSS.

Propiedad de radio de borde: 15 px.

Si no se especifica el marco del bloque, el empalme se produce con el fondo. A continuación se muestra un ejemplo de un bloque redondeado sin borde, pero con un color de fondo:

Propiedad de radio de borde: 15 px.

Existen propiedades para redondear cada esquina individual de un elemento. Este ejemplo los usa todos:

Radio del borde superior izquierdo: 15 px; borde-arriba-derecha-radio: 0; borde-inferior-derecho-radio: 15px; borde-inferior-izquierdo-radio: 0;

Propiedad de radio de borde: 15 px.

Aunque este código se puede escribir en una declaración: border-radius : 15px 0 15px 0 . El hecho es que la propiedad border-radius se puede establecer de uno a cuatro valores. La siguiente tabla describe las reglas que rigen dichos anuncios.

Habiendo estudiado cuidadosamente esta tabla, puedes entender que la mayoría nota corta estilo deseado será así: border-radius: 15px 0. Sólo hay dos significados.

un poco de practica

Dibujando un limón usando CSS.

Aquí está el código para dicho bloque:

Margen: 0 automático; /* Centrar el bloque */ width: 200px; altura: 200 píxeles; fondo: #F5F240; borde: 1px sólido #F0D900; radio del borde: 10px 150px 30px 150px;

Ya hemos dibujado la figura:

Ahora dejemos un triángulo de él:

El código del triángulo es:

Margen: 0 automático; /* Centrar el bloque */ padding: 0px; ancho: 0px; altura: 0; borde: 30px blanco sólido; color del borde inferior: rojo;