Fronteras en CSS

CSS | propiedad border: Aquí, vamos a aprender acerca de la propiedad frontera en CSS con ejemplos .

propiedad border CSS

Las propiedades de borde son class usado especificando el estilo , anchura , y de color de borde de un elemento.

Sintaxis:

    Element{
border: border-width border-style border-color;
}

Ahora vamos a entrar en la frontera más profundo y aprender sobre diferentes cosas que podemos hacer con la propiedad border.

propiedad border-radius

El propiedad border-radius se utiliza para cambiar la forma de la caja. Cada rincón de un elemento puede tener dos valores, for el radio vertical y horizontal de la esquina.

El primer conjunto de valores define el radio horizontal. El segundo conjunto de valores define el radio vertical. Si solamente se suministra un conjunto de valores, se utiliza class tanto el radio vertical y horizontal.

Ejemplo:

La siguiente abreviada le permite ajustar el radio horizontal y vertical de cada esquina en el mismo valor,

<!DOCTYPE html>
<head>
<style>
p {
width: 250px;
height: 250px;
background-color: #0000ee;
border-radius: 10px;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome to include help</p>
</body>
</html>

salida

Borders in CSS - 4

Este código crearía una frontera de el radio de 10px alrededor de la salida.

propiedad border-style

El propiedad border-style se utiliza para establecer el estilo de borde de un elemento.

Borders in CSS - 5

Puede también tener el valor ninguno y oculto.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
border-style: dotted solid double dashed;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome To Include Help</p>
</body>
</html>

salida

Borders in CSS - 6

Frontera (abreviaturas)

mayoría de las veces que desee definir más de una propiedad frontera (como border-width , border-style y border-color ) class cada lado de un elemento.

En lugar de escribir:

    border-width: 1px;
border-style: solid;
border-color: #000;

Se puede escribir:

    border: 1px solid #000;

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
border: 6px dotted #000;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome To Include Help</p>
</body>
</html>

salida

Borders in CSS - 7

Estas abreviaturas se utilizan class cada lado de un elemento: border-top , border-left , border-right y border-bottom .

propiedad border-image

La propiedad border-image se utiliza para establecer una imagen para ser utilizado en lugar de estilos de borde normales.

Una frontera-imagen consiste esencialmente en una,

  • frontera-image-fuente : La ruta de la imagen para ser utilizado.
  • frontera-imagen-rebanada : especifica el desplazamiento que se utiliza para dividir la imagen en nueve regiones (cuatro esquinas, cuatro bordes, y un medio).
  • frontera imagen repetición : Especifica cómo las imágenes for los lados y el centro de la imagen se escalan frontera.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
border: 10px solid transparent;
padding: 15px;
border-image: url("border.png") 30 stretch;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome To Include Help</p>
</body>
</html>

salida

Borders in CSS - 8

La imagen se puede dividir en nueve regiones con 30×30 píxeles. Los bordes se pueden utilizar como las esquinas de la frontera mientras que el lado será utilizado en el medio.

frontera- [left | right | arriba | abajo] propiedad

El frontera- [left | right | arriba | abajo] propiedad se utiliza para agregar un borde a un lado específico de un elemento.

Ejemplo:

<!DOCTYPE html>
<head>
<style>
p {
border-left: 1px solid black;
}
</style>
</head>
<html>
<body>
<p>Hello! Welcome To Include Help</p>
</body>
</html>

salida

Borders in CSS - 9

Este código de seguridad tendría un 1px borde negro sólido a la izquierda de la salida. Si desea agregar un borde a la izquierda de un elemento, se puede hacer esto.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *