Borde CSS en un lado. La propiedad del radio de borde. Redondear las esquinas del borde. Sintaxis de ancho de borde CSS

para mostrar un marco doble. El único método que funciona en todas partes:

Cuatro (borde: sólido 6px #888; fondo: #fff; ancho: 312px; altura mínima: 312px;) .cuatro div (ancho: 300px; altura mínima: 300px; fondo: #222; margen: 6px automático; desbordamiento : oculto)

El elemento exterior tiene un poco tamaño más grande, que crea la ilusión de un doble marco.

Método 5: propiedad de imagen de borde

Otra técnica nueva es la propiedad de imagen de borde de CSS3, a menudo olvidada:

Cinco ( ancho de borde: 12px; -webkit-border-image: url(multiple-borders.gif) 12 12 12 12 repetir; -moz-border-image: url(multiple-borders.gif) 12 12 12 12 repetir; imagen de borde: url (múltiples bordes) 12 12 12 12 repetir /* para Opera */ )

¿Conoces otro método?

Por supuesto, aquí se recopilan métodos conocidos y ampliamente utilizados desde hace mucho tiempo. Pero tal vez conozcas un truco. Comparta con los lectores en los comentarios.

Vlad Merzhevich

Usando CSS, puedes agregar un borde a un elemento de varias maneras. Básicamente, por supuesto, se utiliza. propiedad fronteriza, como el más universal, además de contorno y, sorprendentemente, cuadro de sombra , cuya tarea principal es crear una sombra. A continuación, consideraremos estos métodos y sus diferencias entre ellos.

propiedad de esquema

La propiedad más simple para crear marcos. Tiene los mismos parámetros que border , pero difiere significativamente en algunos detalles:

• el contorno se muestra alrededor del elemento (borde interior);
• el contorno no afecta las dimensiones del elemento (el borde se agrega al ancho y alto del elemento);
• El contorno sólo se puede establecer alrededor de todo el elemento, pero no en partes individuales(el borde se puede utilizar para cualquier lado o para todos a la vez);
• el contorno no se ve afectado por el radio de empalme especificado por la propiedad border-radius (el borde se ve afectado).

Surge la pregunta: ¿en qué casos es necesario un esquema cuando su papel, a pesar de las diferencias enumeradas, lo asume completamente la frontera? No hay muchas situaciones, pero se dan:

• crear marcos multicolores complejos;
• agregar un marco a un elemento cuando pasa el mouse sobre él;
• ocultar el borde que el navegador agrega automáticamente a algunos elementos cuando recibe el foco;
• para el contorno, puede establecer la distancia desde el borde del elemento hasta el marco utilizando la propiedad de desplazamiento del contorno, para crear.

Marcos multicolores

Debe comprender que el contorno de ninguna manera reemplaza al borde y bien puede existir junto con él, como se muestra en el ejemplo 1.

Ejemplo 1: creación de un marco

En este ejemplo, se agrega un marco negro alrededor del elemento, que está separado del fondo por un borde blanco (Fig. 1).

Arroz. 1. Marco alrededor del elemento.

Marco cuando se usa: flotar

Al agregar un marco a través del borde, el ancho del elemento aumenta, lo cual es bastante notable cuando se combina el borde y la pseudoclase :hover. Hay dos maneras de “ganar” esto. Lo más sencillo es sustituir borde por contorno, que como sabemos no afecta al tamaño del elemento (ejemplo 2).

Ejemplo 2: fotograma al pasar el mouse

El contorno no siempre es adecuado, aunque solo sea porque redondear las esquinas no lo afecta. El segundo método es adecuado aquí: agregue un marco invisible o un marco que coincida con el color de fondo y luego cambie sus parámetros al pasar el cursor (ejemplo 3). Entonces no se producirá ningún desplazamiento del elemento, ya que inicialmente el marco ya existe. Pero siempre recordamos que el ancho del elemento es la suma de los valores de ancho, borde a la izquierda y borde a la derecha. La situación es similar con la altura.

Ejemplo 3: fotograma al pasar el mouse

Borde alrededor de los campos del formulario

En algunos navegadores (Chrome, Safari, últimas versiones Opera) se muestra un pequeño icono alrededor de los campos del formulario cuando reciben el foco. marco de color(Figura 2). Para eliminarlo, simplemente agregue el valor none a la propiedad de contorno en los estilos, como se muestra en el ejemplo 4.

Arroz. 2. Encuadre alrededor de los márgenes.

Ejemplo 4. Quitar el marco

Marcos a través de box-shadow

Aunque la propiedad box-shadow está destinada a agregar una sombra alrededor de un elemento, también se puede usar para crear bordes que no se pueden crear usando border o contorno. Todo esto se debe al hecho de que el número de sombras puede ser ilimitado, cuyos parámetros se enumeran separados por comas.

Para obtener un marco, los primeros tres parámetros deben establecerse en cero; son responsables de la posición de la sombra y su desenfoque; El cuarto parámetro en en este caso es responsable del grosor del borde y el quinto establece el color del borde. Para el segundo marco, el cuarto parámetro es igual a la suma de los espesores de los dos marcos.

El ejemplo 4 muestra cómo agregar dos marcos y un borde a la derecha usando una única propiedad de sombra de cuadro.

Ejemplo 4: uso de sombra de cuadro

Resultado este ejemplo mostrado en la Fig. 3.

Arroz. 3. Marcos creados por la propiedad box-shadow.

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.

propiedad de radio de borde 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 marco, es decir ancho de frontera: 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 redondee las esquinas. regla CSS Radio de borde: 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!

Los bordes son esas líneas que rodean un elemento (el contenido que contiene y el relleno que lo rodea). Un ejemplo que ya hemos encontrado son los marcos de celdas dentro de una tabla.

CSS proporciona dos tipos de bordes: bordes interiores y lineas externas. Las propiedades CSS responsables del diseño de marcos comienzan con la palabra “borde”, que puede traducirse como “Marco”, “Borde”. Disponibilidad y formato contorno exterior se especifican mediante propiedades que comienzan con la palabra "esquema". El contorno, a diferencia del borde, no afecta el ancho ni la posición del bloque enmarcado. Además, no se puede instalar en un solo lado, ya que borde- sólo de todos lados a la vez.

Primero hablemos de diseño de borde, entonces pasemos a describir.

ancho de frontera

Establece el ancho del borde. Está claro que, por defecto, el elemento está rodeado de marcos en los cuatro lados. La propiedad le permite establecer el ancho de los bordes igual para todos los lados o diferente para cada lado. Dependiendo del ancho que se deba asignar a cada borde, puede especificar de uno a cuatro valores en la regla.

Puede establecer el ancho utilizando los píxeles, porcentajes y otras unidades habituales. Longitudes CSS y palabras reservadas delgado(2 píxeles), medio(4px) y grueso(6px).

Ancho del borde: 16px 12px 4px 8px;

estilo borde

Define el estilo del borde. Tenga en cuenta que si no establece esta regla pero especifica la propiedad ancho de borde, entonces no habrá ningún marco, así que si quieres límites visibles, asegúrese de indicar estilo borde.

Una propiedad puede tener muchos valores, todos ellos se demuestran claramente en la siguiente figura.

El último párrafo muestra que el estilo, al igual que el grosor, del marco de cada lado puede ser propio:

estilo de borde: sólido doble punteado ninguno

color del borde

Funciona igual que las propiedades anteriores, pero es responsable del color de los bordes. También puedes configurarlo de uno a cuatro valores y ya conocerás el resultado. Si no se establece la regla, los marcos tendrán el color de texto del elemento actual o, si no se especifica, el color de texto del elemento principal.

Color del borde: #C85EFA;

borde

Facilita la escritura y guarda código al permitirle configurar todas las propiedades enumeradas para los bordes en todos los lados de un elemento en una línea:

P (borde: 2px verde sólido;)

Para configurar reglas diferentes marcos con lados diferentes Se pueden utilizar los siguientes valores:

• borde superior- límite superior.
• frontera-derecha- bien.
• borde inferior- más bajo.
• frontera izquierda- izquierda.

P (borde izquierdo: 6px con puntos amarillos;)

ancho del contorno

Igual que ancho de borde, sólo para externos, no marco interior. Establece el grosor del contorno en los mismos valores que ancho de borde. Además del grosor del marco del elemento, es necesario especificar su estilo; de lo contrario, no habrá contorno.

estilo de contorno

Valores de propiedad valores duplicados estilo borde. La regla especifica el estilo del contorno exterior.

Para controlar el borde de un elemento, utilice la propiedad de borde genérica. 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 permiten 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, solo 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 sola declaración: border-radius : 15px 0 15px 0 . El hecho es que la propiedad border-radius se puede establecer entre uno y 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;