Taller > CSS
Border en CSS
Utilizando la sintaxis abreviada: border: tamaño estilo color;
Utilizando las propiedades individuales: border-width, border-style y border-color.
La sintaxis abreviada de la propiedad border permite especificar todos los valores en una sola línea, en el orden: tamaño, estilo, color. Cada uno de estos valores también se pueden especificar utilizando las propiedades border-width, border-style y border-color respectivamente.
Ejemplo:
/* Sintaxis abreviada */
border: 1px solid red;
/* Propiedades individuales */
border-width: 1px;
border-style: solid;
border-color: red;
En este ejemplo se establece un borde de 1px de ancho, con un estilo sólido y de color rojo.
También se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom y border-left.
Ejemplos de uso
Aquí te muestro un ejemplo de cómo utilizar la propiedad “border” en un elemento HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* Aplicando la propiedad border a un elemento div */
div {
border: 2px solid blue;
}
</style>
</head>
<body>
<div>Este es un ejemplo de un elemento div con un borde azul de 2px de ancho y estilo sólido.</div>
</body> </html>
En este ejemplo, se aplica un borde azul de 2px de ancho y estilo sólido al elemento div. El contenido dentro del div se verá rodeado por un borde azul.
También se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom, border-left.
<!DOCTYPE html>
<html>
<head>
<style>
/* Aplicando la propiedad border a un elemento div */
div {
border-top: 2px solid blue;
border-right: 2px solid green;
border-bottom: 2px solid red;
border-left: 2px solid yellow;
}
</style>
</head>
<body>
<div>
Este es un ejemplo de un elemento div con un borde azul de 2px de ancho y estilo sólido en la parte superior, verde en la parte derecha, rojo en la parte inferior, y amarillo en la parte izquierda. </div>
</body>
</html>
En este ejemplo, se especifican los bordes para cada lado del elemento div de forma individual. El contenido dentro del div se verá rodeado por un borde azul en la parte superior, verde en la derecha, rojo en la parte inferior, y amarillo en la parte izquierda.
Valores
La propiedad “border” en CSS tiene varios posibles valores que puedes especificar, dependiendo de cómo quieres que se vea tu borde. Los posibles valores son:
Tamaño: Puedes especificar el tamaño del borde en píxeles (px), puntos (pt), o porcentaje (%).
Estilo: Puedes especificar el estilo del borde utilizando una de las siguientes opciones:
none: No se dibuja ningún borde.
solid: El borde es sólido.
dotted: El borde está formado por puntos.
dashed: El borde está formado por líneas discontinuas.
double: El borde está formado por dos líneas paralelas.
groove: El borde tiene un estilo de relieve en 3D.
ridge: El borde tiene un estilo de relieve invertido en 3D.
inset: El borde tiene un estilo de relieve hacia adentro.
outset: El borde tiene un estilo de relieve hacia afuera.
Color: Puedes especificar el color del borde utilizando una de las siguientes opciones:
Un nombre de color, como “red” o “blue”.
Un código hexadecimal, como “#ff0000” o “#0000ff”.
Un código RGB, como “rgb(255,0,0)” o “rgb(0,0,255)”.
Un código RGBA, como “rgba(255,0,0,1)” o “rgba(0,0,255,0.5)”
.
Ejemplo:
border: 2px dotted #ff0000;
En este ejemplo se establece un borde de 2px de ancho, con un estilo de puntos y de color rojo.
Recuerda que también se pueden especificar los bordes para cada lado de un elemento de forma individual utilizando las propiedades border-top, border-right, border-bottom, border-left.
Ejemplos
Aquí te dejo algunos ejemplos concretos de cómo utilizar la propiedad “border” en un elemento HTML:
Ejemplo 1: Crear un borde sólido de 3px de ancho y color rojo alrededor de una imagen:
<img src="mi-imagen.jpg" style="border: 3px solid red;" alt="Mi imagen">
Ejemplo 2: Crear un borde de estilo “dotted” con un ancho de 1px y color verde para una tabla:
<table style="border: 1px dotted green;">
<tr>
<td>Celda 1</td>
<td>Celda 2</td>
</tr>
<tr>
<td>Celda 3</td>
<td>Celda 4</td>
</tr>
</table>
Ejemplo 3: Crear un borde sólido de 2px de ancho, color amarillo y redondear las esquinas con un radio de 10px para un botón:
<button style="border: 2px solid yellow; border-radius: 10px;">Haga clic aquí</button>
Ejemplo 4: Crear un borde de estilo «double» con un ancho de 3px y color azul para un elemento div:
Este es un ejemplo de un elemento div con un borde azul de 3px de ancho y estilo "double".
<div style="border: 3px double blue;">
Este es un ejemplo de un elemento div con un borde azul de 3px de ancho y estilo "double".
</div>Ejemplo 5: Crear un borde sólido de 1px de ancho, color negro y redondear solo la esquina superior derecha con un radio de 5px para una caja de texto:
<input type="text" style="border: 1px solid black; border-top-right-radius: 5px;">
Propiedades relacionadas
La propiedad “border” en CSS tiene varias propiedades relacionadas que te permiten personalizar aún más tus bordes: Aquí te dejo una lista de las principales propiedades relacionadas con “border” en CSS:
border-width: permite especificar el ancho de los bordes.
border-style: permite especificar el estilo de los bordes (solid, dotted, dashed, double, groove, ridge, inset, outset y none).
border-color: permite especificar el color de los bordes.
border-top: permite especificar los valores de borde para la parte superior del elemento.
border-right: permite especificar los valores de borde para la parte derecha del elemento.
border-bottom: permite especificar los valores de borde para la parte inferior del elemento.
border-left: permite especificar los valores de borde para la parte izquierda del elemento.
border-radius: permite especificar el radio de las esquinas redondas de los bordes.
border-image: permite establecer una imagen como borde.
border-collapse: permite especificar cómo se deben renderizar los bordes de las celdas de una tabla.
border-spacing: permite especificar el espacio entre las celdas de una tabla cuando los bordes están juntos.
box-sizing: permite especificar cómo se deben calcular el ancho y alto de un elemento en relación a su borde y relleno.
outline: permite especificar un borde alrededor de un elemento que no afecta al tamaño del contenido.
Otras propiedades relacionadas con “border” en CSS que podrían ser útiles en algunos casos específicos:
border-top-width: permite especificar el ancho del borde superior de un elemento.
border-right-width: permite especificar el ancho del borde derecho de un elemento.
border-bottom-width: permite especificar el ancho del borde inferior de un elemento.
border-left-width: permite especificar el ancho del borde izquierdo de un elemento.
border-top-color: permite especificar el color del borde superior de un elemento.
border-right-color: permite especificar el color del borde derecho de un elemento.
border-bottom-color: permite especificar el color del borde inferior de un elemento.
border-left-color: permite especificar el color del borde izquierdo de un elemento.
border-top-style: permite especificar el estilo del borde superior de un elemento.
border-right-style: permite especificar el estilo del borde derecho de un elemento.
border-bottom-style: permite especificar el estilo del borde inferior de un elemento.
border-left-style: permite especificar el estilo del borde izquierdo de un elemento.
border-top-left-radius: permite especificar el radio de la esquina superior izquierda del borde.
border-top-right-radius: permite especificar el radio de la esquina superior derecha del borde.
border-bottom-left-radius: permite especificar el radio de la esquina inferior izquierda del borde.
border-bottom-right-radius: permite especificar el radio de la esquina inferior derecha del borde.
border-image-source: permite especificar la imagen utilizada como borde.
border-image-slice: permite especificar cómo se deben recortar las esquinas de la imagen de borde.
border-image-width: permite especificar el ancho de las imágenes de borde.
border-image-outset: permite especificar el margen exterior de la imagen de borde.
border-image-repeat: permite especificar cómo se deben repetir las imágenes de borde.
Ancho del borde con CSS
En CSS, la propiedad border-width se utiliza para establecer el ancho del borde de un elemento HTML. Esta propiedad acepta varios valores, que incluyen:
Números con unidades de medida (por ejemplo, pixels o puntos)
Palabras clave (thin, medium, thick)
Ejemplo:
border-width: 2px;
border-width: medium;
También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo el ancho.
Ejemplo:
border: 2px solid blue;
Además, es posible utilizar anchos diferentes para cada lado del borde.
Ejemplo:
border-top-width: 2px;
border-right-width: 4px;
border-bottom-width: 6px;
border-left-width: 8px;
Ten en cuenta que es importante utilizar unidades de medida consistentes al establecer el ancho del borde.
Por ejemplo, si utilizas pixels para el ancho del borde, deberías utilizar pixels para el alto y el ancho del elemento también.
Color del borde con CSS
En CSS, la propiedad border-color se utiliza para establecer el color del borde de un elemento HTML. Esta propiedad acepta varios valores, que incluyen:
Nombres de colores (por ejemplo, “red”, “blue”, “green”)
Valores de color en hexadecimal (por ejemplo, “#FF0000”, “#0000FF”, “#00FF00”)
Valores de color RGB o RGBA (por ejemplo, “rgb(255,0,0)”, “rgba(0,0,255,0.5)”)
Ejemplos:
border-color: red;
border-color: #0000FF;
border-color: rgba(0,255,0,0.5);
También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo el color.
Ejemplo:
border: 2px solid red;
Además, es posible utilizar colores diferentes para cada lado del borde.
Ejemplo:
border-top-color: blue;
border-right-color: green;
border-bottom-color: orange;
border-left-color: purple;
Ten en cuenta que al utilizar valores RGBA, se puede establecer una transparencia en el color, utilizando el cuarto valor (alpha) que va desde 0 (totalmente transparente) hasta 1 (totalmente opaco).
Es importante tener en cuenta que algunos navegadores pueden tener dificultades para mostrar ciertos valores de color, especialmente los valores RGBA.
Por lo tanto, es recomendable utilizar valores de color compatibles con la mayoría de los navegadores para garantizar una experiencia de usuario consistente.
Lados del borde con CSS
En CSS, es posible establecer estilos, anchos y colores diferentes para cada lado del borde de un elemento HTML utilizando las propiedades específicas para cada lado del borde. Estas propiedades incluyen:
border-top-width, border-top-style, border-top-color: para establecer el ancho, estilo y color del borde superior.
border-right-width, border-right-style, border-right-color: para establecer el ancho, estilo y color del borde derecho.
border-bottom-width, border-bottom-style, border-bottom-color: para establecer el ancho, estilo y color del borde inferior.
border-left-width, border-left-style, border-left-color: para establecer el ancho, estilo y color del borde izquierdo.
Ejemplos:
border-top-width: 2px; border-top-style: solid; border-top-color: blue;
border-right-width: 4px; border-right-style: dotted; border-right-color: red;
border-bottom-width: 6px; border-bottom-style: dashed; border-bottom-color: green;
border-left-width: 8px; border-left-style: double; border-left-color: orange;
También es posible utilizar la propiedad abreviada border para establecer varias propiedades de borde al mismo tiempo, incluyendo las propiedades específicas para cada lado del borde.
Ejemplo:
border-top: 2px solid blue;
border-right: 4px dotted red;
border-bottom: 6px dashed green;
border-left: 8px double orange;
Ten en cuenta que estas propiedades específicas para cada lado del borde se utilizan para dar más control sobre el diseño de los bordes de los elementos HTML, pero pueden ser más tediosas de escribir y mantener que las propiedades abreviadas. Utiliza la que mejor se adapte a tus necesidades.
Bordes redondeados con CSS
En CSS, la propiedad border-radius se utiliza para crear bordes redondeados en los elementos HTML. Esta propiedad acepta varios valores, que incluyen:
- Números con unidades de medida (por ejemplo, pixels o puntos) para establecer el radio de curvatura de los bordes redondeados.
- Valores porcentuales para establecer el radio de curvatura de los bordes redondeados en relación con el tamaño del elemento.
Ejemplo:
border-radius: 25px;
border-radius: 10%;
Además, es posible establecer radios de curvatura diferentes para cada esquina del borde utilizando las propiedades específicas para cada esquina. Estas propiedades incluyen:
border-top-left-radius, border-top-right-radius: para establecer el radio de curvatura de las esquinas superior izquierda y superior derecha.
border-bottom-left-radius, border-bottom-right-radius: para establecer el radio de curvatura de las esquinas inferior izquierda y inferior derecha.
Ejemplo:
border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 100px;
También es posible utilizar un valor único para las propiedades específicas para cada esquina para crear un borde redondeado con un radio de curvatura uniforme.
Ejemplo:
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
Es importante tener en cuenta que algunos navegadores pueden tener dificultades para mostrar bordes redondeados con radios de curvatura muy grandes, especialmente en elementos con bordes muy anchos.
Por lo tanto, es recomendable utilizar radios de curvatura moderados para garantizar una experiencia de usuario consistente.
Ejemplo con código HTML y CSS
Aquí te dejo un ejemplo más detallado de código HTML y CSS que muestra cómo utilizar varias propiedades de borde para personalizar un elemento.
En este caso, se utiliza una etiqueta div como elemento de ejemplo:
<div id="miDiv">Este es mi div</div>
#miDiv {
width: 200px;
height: 100px;
padding: 20px;
border-top: 2px solid blue;
border-right: 4px dotted red;
border-bottom: 6px dashed green;
border-left: 8px double orange;
border-top-left-radius: 25px;
border-top-right-radius: 50px;
border-bottom-left-radius: 75px;
border-bottom-right-radius: 100px;
}
En este ejemplo, se establece un ancho y un alto para el elemento div utilizando las propiedades width y height. También se establece un relleno utilizando la propiedad padding para crear espacio entre el contenido del div y su borde.
Luego, se utilizan las propiedades border-top, border-right, border-bottom, y border-left para establecer un borde sólido de 2 pixels de ancho y color azul en la parte superior, un borde punteado de 4 pixels de ancho y color rojo en la parte derecha, un borde con rayas de 6 pixels de ancho y color verde en la parte inferior y un borde doble de 8 pixels de ancho y color naranja en la parte izquierda del div.
Además, se utilizan las propiedades border-top-left-radius, border-top-right-radius, border-bottom-left-radius y border-bottom-right-radius para establecer radios de curvatura diferentes en cada esquina del borde.
En este caso, se establece un radio de curvatura de 25 pixels en la esquina superior izquierda, 50 pixels en la esquina superior derecha, 75 pixels en la esquina inferior izquierda y 100 pixels en la esquina inferior derecha.
El resultado final es un div con un borde azul sólido en la parte superior, un borde punteado rojo en la parte derecha, un borde con rayas verde en la parte inferior y un borde doble naranja en la parte izquierda, con radios de curvatura diferentes en cada esquina y con un espacio entre su contenido y su borde.
Es importante tener en cuenta que este es solo un ejemplo avanzado y que hay muchas más formas de personalizar los bordes utilizando CSS. Puedes jugar con diferentes combinaciones de estilos, anchos y colores, así como con diferentes radios de curvatura para lograr el diseño que desees.
Más ejemplos
Aquí te dejo algunos ejemplos de cómo utilizar la propiedad “border” en CSS:
Ejemplo de borde sólido de 2px de ancho y color rojo:
div {
border: 2px solid red;
}
Ejemplo de borde punteado de 1px de ancho y color verde:
p {
border: 1px dotted green;
}
Ejemplo de borde múltiple, con un borde sólido de 2px de ancho y color azul en la parte superior e inferior, y un borde punteado de 1px de ancho y color negro en los lados derecho e izquierdo:
img {
border-top: 2px solid blue;
border-right: 1px dotted black;
border-bottom: 2px solid blue;
border-left: 1px dotted black;
}
Ejemplo de borde redondeado, con un radio de 5px para las esquinas redondas:
button {
border: 2px solid black;
border-radius: 5px;
}
Ejemplo de borde con imagen:
#miDiv {
border: 30px;
border-image: url("border-image.png") 30 30 round;
}
Margin en CSS
La propiedad “margin” se puede establecer en un solo valor (para establecer los márgenes en todas las direcciones), o en valores múltiples (para establecer los márgenes en cada dirección individualmente).
Los valores válidos para la propiedad “margin” son unidades de longitud (como px, em, etc.), porcentajes, o la palabra clave “auto”.
Ejemplo de uso
Aquí hay un ejemplo de cómo utilizar la propiedad “margin” en CSS para establecer los márgenes en un elemento HTML:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establece un margen de 10px en todas las direcciones */
#elemento1 {
margin: 10px;
}
/* Establece margenes individuales en cada dirección */
#elemento2 {
margin-top: 20px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 30px;
}
</style>
</head>
<body>
<div id="elemento1">Este es el primer elemento</div>
<div id="elemento2">Este es el segundo elemento</div>
</body>
</html>
En este ejemplo, se establece un margen de 10px en todas las direcciones para el primer elemento, y se establecen margenes individuales de 20px para top, 15px para right, 25px para bottom and 30px para left para el segundo elemento.
Valores
La propiedad “margin” en CSS acepta varios tipos de valores, entre ellos:
Valores numéricos con unidades de medida: puedes especificar los márgenes en píxeles (px), puntos (pt), em, rem, etc. Por ejemplo: margin: 10px; establece un margen de 10px en todas las direcciones.
Porcentajes: los márgenes se pueden establecer en porcentajes del tamaño del elemento contenedor. Por ejemplo: margin: 10%; establece un margen del 10% del tamaño del elemento contenedor en todas las direcciones.
Auto: El valor “auto” se utiliza para centrar automáticamente un elemento dentro de su elemento contenedor. Por ejemplo: margin: auto; centrará automáticamente el elemento en el elemento contenedor.
Valores negativos: los márgenes pueden ser negativos, lo que permite superponer elementos. Por ejemplo: margin: -10px; establecerá un margen negativo de 10px en todas las direcciones.
Ejemplos
Aquí hay algunos ejemplos de cómo utilizar diferentes valores para la propiedad “margin” en CSS: Especificando márgenes en píxeles: #elemento1 {
margin: 10px;
/* establece un margen de 10px en todas las direcciones */
}
#elemento2 {
margin-top: 20px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 30px;
/* establece margenes individuales en cada dirección */
}
Especificando márgenes en porcentajes: #elemento3 {
margin: 10%;
/* establece un margen del 10% del tamaño del elemento contenedor en todas las direcciones */
} #elemento4 {
margin-top: 20%;
margin-right: 15%;
margin-bottom: 25%;
margin-left: 30%;
/* establece margenes individuales en porcentaje en cada dirección */
}
Utilizando el valor “auto” para centrar automáticamente un elemento:
#elemento5 {
margin: auto;
/* centrará automáticamente el elemento en el elemento contenedor */
}
Utilizando valores negativos:
#elemento6 {
margin: -10px;
/* establece un margen negativo de 10px en todas las direcciones */
}
Es importante mencionar que estos ejemplos asumen que el elemento en cuestión tiene un tamaño y un ancho específicos, o está siendo controlado por otras propiedades CSS.
Propiedades relacionadas
Algunas propiedades relacionadas con “margin” en CSS son:
padding: establece el relleno dentro de un elemento, es decir, el espacio entre el contenido de un elemento y sus bordes.
border: establece el borde alrededor de un elemento.
width y height: establecen el ancho y alto de un elemento, respectivamente.
box-sizing: permite incluir el relleno y el borde en el cálculo del ancho y alto de un elemento.
Además, también existen las propiedades de margen individuales como margin-top, margin-right, margin-bottom y margin-left, que permiten especificar márgenes diferentes para cada dirección.
Es importante entender cómo funcionan estas propiedades juntas para lograr el diseño deseado en una página web. Utilizando estas propiedades de manera adecuada, puedes crear diseños complejos y atractivos.
Ejemplos
Aquí hay algunos ejemplos de cómo utilizar las propiedades relacionadas con “margin” en CSS:
Utilizando padding y margin juntos para crear un espacio entre elementos:
<div id="contenedor">
<div id="elemento1">Contenido del primer elemento</div>
<div id="elemento2">Contenido del segundo elemento</div>
</div>
#contenedor {
border: 1px solid black;
/* agrega un borde al contenedor */
}
#elemento1 {
margin: 10px;
/* agrega un margen alrededor del primer elemento */
padding: 15px;
/* agrega un relleno al interior del primer elemento */
}
#elemento2 {
margin: 10px;
/* agrega un margen alrededor del segundo elemento */
padding: 15px;
/* agrega un relleno al interior del segundo elemento */
}
Utilizando width y height para controlar el tamaño de un elemento:
<div id="elemento3">Contenido del tercer elemento</div>
#elemento3 {
width: 300px;
/* establece el ancho del elemento en 300px */
height: 200px;
/* establece el alto del elemento en 200px */
margin: 10px;
/* agrega un margen alrededor del elemento */
}
Utilizando box-sizing para incluir el relleno y el borde en el cálculo del tamaño de un elemento:
<div id="elemento4">Contenido del cuarto elemento</div>
#elemento4 {
width: 300px;
/* establece el ancho del elemento en 300px */
height: 200px;
/* establece el alto del elemento en 200px */
padding: 20px;
/* agrega un relleno al interior del elemento */
border: 1px solid black;
/* agrega un borde alrededor del elemento */
box-sizing: border-box;
/* incluye el relleno y el borde en el cálculo del tamaño del elemento */
}
Es importante notar que estos ejemplos son solo algunos de los muchos usos posibles de estas propiedades y combinaciones de propiedades, y pueden variar según el contexto y el objetivo del diseño.
Más ejemplos
Aquí hay algunos ejemplos adicionales de cómo utilizar la propiedad “margin” en CSS:
Utilizando “margin” para crear un espacio entre un elemento y el borde de la página:
<body>
<div id="elemento1">Contenido del primer elemento</div>
</body>
#elemento1 {
margin: 50px;
/* agrega un margen de 50px alrededor del primer elemento */
}
Utilizando «margin» para crear un espacio entre varios elementos:
<div id="contenedor">
<div id="elemento1">Contenido del primer elemento</div>
<div id="elemento2">Contenido del segundo elemento</div>
<div id="elemento3">Contenido del tercer elemento</div>
</div>
#elemento1, #elemento2, #elemento3 {
margin: 10px 0;
/* agrega un margen de 10px arriba y abajo, y 0 a los lados */
}
Utilizando «margin» para crear un espacio entre un elemento y sus elementos vecinos:
<div id="contenedor"> <div id="elemento1">Contenido del primer elemento</div> <div id="elemento2">Contenido del segundo elemento</div> <div id="elemento3">Contenido del tercer elemento</div> </div>
#elemento1 {
margin-bottom: 20px;
/* agrega un margen de 20px debajo del primer elemento */
}
#elemento3 {
margin-top: 20px;
/* agrega un margen de 20px arriba del tercer elemento */
}
Utilizando «margin» para crear un espacio entre un elemento y su elemento contenedor:
<div id="contenedor">
<div id="elemento1">Contenido del primer elemento</div>
</div>
#contenedor {
background-color: #ccc;
/* agrega un color de fondo al contenedor */
}
#elemento1 {
margin: 20px;
/* agrega un margen de 20px alrededor del primer elemento */
}
Espero que estos ejemplos te ayuden a entender mejor cómo utilizar la propiedad “margin” en CSS y cómo puede ser utilizada para crear diseños atractivos y ordenados. No dudes en preguntar si tienes alguna pregunta adicional.
Width en CSS
Por ejemplo, si quieres que una imagen tenga un ancho de 400px, se usaría la siguiente regla CSS:
img {
width: 400px;
}
También puede ser utilizado en conjunto con un elemento de bloque para establecer un ancho específico y controlar el tamaño de un elemento en particular.
div {
width: 50%;
}
Es importante tener en cuenta que si se establece un ancho para un elemento, también debería establecerse un alto para evitar problemas de distorsión en caso de contenido escalable.
Ejemplo de uso
Aquí tienes un ejemplo de cómo usar la propiedad width en CSS para establecer el ancho de una caja de texto:
<!DOCTYPE html>
<html>
<head>
<style>
/* Establece el ancho de la caja de texto en 300px */
input[type=text] {
width: 300px;
}
</style>
</head>
<body>
<form>
<label for="name">Nombre:</label>
<input type="text" id="name" name="name">
</form>
</body>
</html>
En este ejemplo, estamos utilizando una regla de selección para seleccionar todos los elementos de tipo input con el atributo type igual a text, y estableciendo su ancho en 300px. Esto hará que todas las cajas de texto en la página tengan un ancho de 300px.
También podrías establecer el ancho en un porcentaje, por ejemplo:
input[type=text] {
width: 80%;
}
De esta forma el ancho será el 80% del ancho del contenedor.
Valores
La propiedad width en CSS acepta varios tipos de valores:
Valores numéricos con unidades: Puedes especificar un ancho en píxeles (px), puntos (pt), o cualquier otra unidad de medida absoluta. Por ejemplo:
div {
width: 200px;
/* 200 píxeles */
width: 15em;
/* 15 unidades de tamaño de letra */
width: 10vw;
/* 10% del ancho de la ventana */
}
Valores porcentuales: Puedes especificar el ancho en términos de porcentaje del ancho del contenedor. Por ejemplo:
div {
width: 50%;
/* el ancho es la mitad del ancho del contenedor */
width: 80%;
/* el ancho es el 80% del ancho del contenedor */
}
Valores automáticos: Puedes usar la palabra clave auto para que el ancho sea calculado automáticamente en función del contenido del elemento. Este es el valor predeterminado para muchos elementos. Por ejemplo:
img {
width: auto;
/* el ancho se calcula automáticamente en función del tamaño de la imagen */
}
Valores negativos: No son válidos, se ignorarán.
Es importante tener en cuenta que algunos elementos, como las imágenes, pueden tener un ancho y un alto especificado en su atributo src, y esto puede afectar a cómo se renderizan a menos que se especifique un ancho y alto en CSS.
Otros valores
Además de los valores mencionados anteriormente, también existen algunas otras palabras clave que puedes usar con la propiedad width en CSS:
initial: Establece el valor inicial del navegador para el ancho del elemento. Este es el valor predeterminado para la mayoría de los elementos.
inherit: Hace que el ancho del elemento sea el mismo que el de su elemento padre. Esto es útil si quieres que un elemento tenga el mismo ancho que su elemento padre.
unset: Este valor deshace cualquier valor especificado anteriormente para la propiedad width, y hace que el elemento vuelva a su comportamiento predeterminado.
Es importante tener en cuenta que algunos valores pueden tener un comportamiento diferente dependiendo del contexto y del elemento en el que se aplican. Por ejemplo, un valor porcentual para la propiedad width se refiere al ancho del contenedor, mientras que un valor porcentual para la propiedad height se refiere al alto del contenedor.
Además, es importante tener en cuenta que el uso de la propiedad width junto con otras propiedades como la propiedad box-sizing puede generar diferentes comportamientos en los elementos.
Propiedades relacionadas
Una propiedad relacionada con width en CSS es max-width. La propiedad max-width establece el ancho máximo que un elemento puede tener. Esto es útil si quieres evitar que un elemento se estire demasiado y cause problemas de diseño.
Por ejemplo, si quieres que una imagen no sea más ancha de 600px, incluso si la imagen original es más grande, puedes usar la siguiente regla CSS:
img {
max-width: 600px;
}
De esta forma, si la imagen original es más ancha de 600px, se escalará automáticamente a ese tamaño máximo, pero si es menor no se afectará su tamaño.
Otra propiedad relacionada es min-width que establece el ancho mínimo que un elemento puede tener. Esta propiedad es útil si quieres asegurarte de que un elemento tenga un tamaño mínimo en pantallas pequeñas o en dispositivos con resoluciones bajas.
div {
min-width: 300px;
}
De esta forma, incluso si el contenido dentro de la caja es muy pequeño, la caja siempre tendrá un ancho mínimo de 300px.
Estas propiedades son importantes para lograr un diseño responsive, donde se adapta el tamaño de los elementos a diferentes tamaños de pantalla.
Ejemplos
Aquí tienes algunos ejemplos de cómo usar las propiedades width, max-width y min-width en CSS:
Establecer un ancho fijo para un elemento:
div {
width: 300px;
}
Establecer un ancho en porcentaje para un elemento:
div {
width: 80%;
}
Establecer un ancho máximo para una imagen:
img {
max-width: 500px;
}
Establecer un ancho mínimo para una caja de texto:
input[type=text] {
min-width: 200px;
}
Establecer un ancho automático para un elemento:
img {
width: auto;
}
Establecer un ancho mínimo y máximo para un elemento:
div {
min-width:
300px;
max-width:
800px;
}
Con estos ejemplos, podrías tener un mejor control sobre el tamaño de los elementos en tu página web y lograr un diseño más consistente y adaptable.
Más ejemplos
Claro, aquí tienes algunos ejemplos más de cómo usar la propiedad width en CSS:
Establecer un ancho fijo para un elemento de bloque:
div {
width: 400px;
height: 200px;
/* es importante establecer un alto también */
background-color: lightblue;
/* para ver el tamaño del elemento */
}
Establecer un ancho en porcentaje para un elemento dentro de un contenedor:
<div class="container">
<div class="box"></div>
</div>
.container {
width: 100%;
}
.box {
width: 50%;
/* el ancho será la mitad del ancho del contenedor */
height: 100px;
/* establecer un alto */
background-color: lightgreen;
/* para ver el tamaño del elemento */
}
Establecer un ancho automático para una tabla:
<table> <tr> <td>Celda 1</td> <td>Celda 2</td> </tr> </table>
table {
width: auto;
/* el ancho se calcula automáticamente en función del contenido */
border: 1px solid black;
/* para ver el tamaño de la tabla */
}
Establecer un ancho máximo y mínimo para un contenedor:
<div class="container"> <p>Contenido</p> </div>
.container {
min-width: 300px;
/* ancho mínimo de 300px */
max-width: 600px;
/* ancho máximo de 600px */
background-color: lightgray; /* para ver el tamaño del elemento */
}
Height en CSS
Por ejemplo, si deseas establecer la altura de un elemento <div> en 300 pixels, podrías escribir:
div {
height: 300px;
}
También es posible utilizar valores automáticos o porcentuales. Si utilizas “auto” como valor, la altura del elemento se ajustará automáticamente a su contenido.
Si utilizas un porcentaje, la altura se establecerá en relación a la altura del elemento padre.
Ejemplo de uso
Aquí tienes un ejemplo de cómo se puede utilizar la propiedad “height” en CSS para establecer la altura de un elemento:
<div class="box"> Contenido del elemento </div>
.box {
height: 200px;
/* la altura del elemento será de 200 pixels */
background-color: blue;
/* para que se vea el elemento */
}
En este caso, estamos utilizando una clase “box” para seleccionar el elemento <div> y estableciendo su altura en 200 pixels. También estamos cambiando el color de fondo del elemento para que sea visible en la página.
Igualmente puedes usar porcentaje
.box {
height: 50%;
/* la altura del elemento será del 50% del elemento padre */
background-color: blue;
/* para que se vea el elemento */
}
o “auto” para que el elemento se ajuste al contenido
.box {
height: auto;
/* la altura del elemento se ajustará al contenido */
background-color: blue;
/* para que se vea el elemento */
}
Espero que esto te ayude a entender cómo utilizar la propiedad «height» en CSS.
Valores
La propiedad “height” en CSS acepta varios tipos de valores, incluyendo:
Unidades absolutas: Puedes especificar una altura en pixels (px), puntos (pt), o cualquier otra unidad de medida absoluta. Por ejemplo:
div {
height: 100px;
}
Unidades relativas: Puedes especificar la altura en relación al tamaño del elemento padre utilizando porcentajes (%). Por ejemplo:
div {
height: 50%;
}
auto: El valor “auto” indica que la altura del elemento debe ajustarse automáticamente a su contenido. Por ejemplo:
div {
height: auto;
}
initial: Es el valor inicial del navegador.
inherit: Hereda la altura del elemento padre.
min-content: Establece la altura mínima necesaria para contener su contenido.
max-content: Establece la altura máxima necesaria para contener su contenido.
fit-content: Establece la altura necesaria para contener su contenido con un rango específico.
Es importante tener en cuenta que algunos valores solo funcionan con algunos elementos, y algunos valores son solo compatibles con ciertos navegadores.
Siempre es recomendable verificar la compatibilidad de los valores antes de utilizarlos en un proyecto.
Funciones en la propiedad
Además de los valores mencionados anteriormente, también se pueden usar funciones como calc() en la propiedad “height” de CSS. La función calc() permite realizar cálculos matemáticos con unidades de medida, lo que permite un mayor control sobre el tamaño de los elementos. Por ejemplo:
div {
height: calc(100px + 50%);
}
En este caso, la altura del elemento será el resultado de sumar 100 pixels más el 50% del tamaño del elemento padre.
También se pueden usar las funciones min() y max() para establecer un rango de valores para la altura de un elemento. Por ejemplo:
div {
height: min(200px, 50%);
}
En este caso, la altura del elemento será la menor de 200 pixels o el 50% del tamaño del elemento padre.
En resumen, la propiedad “height” en CSS tiene una variedad de valores que permiten un gran control sobre el tamaño de los elementos en una página web, desde unidades absolutas y relativas hasta funciones matemáticas y funciones de control de rango.
Propiedades relacionadas
Algunas propiedades relacionadas con “height” en CSS son:
width: Es la propiedad complementaria de “height”, y se utiliza para establecer el ancho de un elemento.
max-height: Establece un límite máximo para la altura de un elemento.
min-height: Establece un límite mínimo para la altura de un elemento.
padding-top y padding-bottom: Establecen el relleno superior e inferior de un elemento, respectivamente. Estos valores se suman a la altura total del elemento.
margin-top y margin-bottom: Establecen el margen superior e inferior de un elemento, respectivamente. Estos valores se suman a la altura total del elemento.
border-top-width y border-bottom-width: Establecen el ancho de las líneas de borde superior e inferior de un elemento, respectivamente. Estos valores se suman a la altura total del elemento.
box-sizing: Esta propiedad determina cómo se calcula el tamaño de un elemento, incluyendo su altura.
flex-wrap: Esta propiedad se utiliza en los elementos flex y determina si los elementos hijos se ajustan a una sola línea o se ajustan a varias líneas.
grid-template-rows: Esta propiedad se utiliza en los elementos grid y establece la altura de las filas en una cuadrícula.
Es importante tener en cuenta que cada una de estas propiedades puede afectar la altura final de un elemento, por lo que es importante comprender cómo funcionan juntas para lograr el diseño deseado.
Ejemplos
Aquí tienes algunos ejemplos de cómo se pueden utilizar las propiedades relacionadas con “height” en CSS:
max-height:
img {
max-height: 200px;
/* la altura máxima de la imagen será de 200 pixels */
}
min-height:
div {
min-height: 100px;
/* la altura mínima del elemento será de 100 pixels */
}
padding-top y padding-bottom:
div {
height: 100px;
/* altura establecida */
padding-top: 20px;
/* añadir 20 pixels de relleno superior */
padding-bottom: 20px;
/* añadir 20 pixels de relleno inferior */
}
margin-top y margin-bottom:
div {
height: 100px;
/* altura establecida */
margin-top: 20px;
/* añadir 20 pixels de margen superior */
margin-bottom: 20px;
/* añadir 20 pixels de margen inferior */
}
border-top-width y border-bottom-width:
div {
height: 100px;
/* altura establecida */
border-top-width: 2px;
/* añadir 2 pixels de borde superior */
border-bottom-width: 2px;
/* añadir 2 pixels de borde inferior */
border-style: solid;
/* estilo de borde */
border-color: black;
/* color de borde */
}
box-sizing:
div {
height: 100px;
/* altura establecida */
padding: 20px;
/* añadir 20 pixels de relleno */
border: 2px solid black;
/* añadir 2 pixels de borde */
box-sizing: border-box;
/* incluir el relleno y el borde en el cálculo de la altura del elemento */
}
flex-wrap:
display: flex;
flex-wrap: wrap;
/* elementos hijos se ajustarán a varias líneas si es necesario */
}
grid-template-rows:
.container {
display: grid;
grid-template-rows: 100px 200px 300px;
/* altura de las filas 1, 2 y 3 en una cuadrícula */
}
Espero que estos ejemplos te ayuden a entender cómo se pueden utilizar las propiedades relacionadas con “height” en CSS para controlar el tamaño de los elementos en una página web.
Más ejemplos
Aquí te dejo algunos ejemplos adicionales de cómo se puede utilizar la propiedad “height” en CSS:
Establecer altura diferente en distintos tamaños de pantalla:
/* Establecer altura de 100px en pantallas pequeñas */
@media (max-width: 600px) {
div {
height: 100px;
} }
/* Establecer altura de 200px en pantallas medianas */
@media (min-width: 600px) and (max-width: 900px) {
div {
height: 200px;
} }
/* Establecer altura de 300px en pantallas grandes */
@media (min-width: 900px) {
div {
height: 300px;
} }
Utilizando una función de transición para cambiar la altura de un elemento al hacer hover:
div {
height: 100px;
/* altura inicial */
transition: height 0.5s ease-in-out;
/* transición de altura */
}
div:hover {
height: 200px;
/* nueva altura al hacer hover */
}
Utilizando una animación para cambiar la altura de un elemento:
@keyframes grow {
from {
height: 100px;
}
to {
height: 200px;
} }
div {
height: 100px;
/* altura inicial */
animation: grow 2s ease-in-out;
/* animación */
}
Utilizando una función calc() para calcular la altura en relación a otro elemento:
#elemento1 {
height: 100px;
/* altura establecida */
}
#elemento2 {
height: calc(100% - #elemento1);
/* altura calculada en relación al elemento1 */
}
Estos son solo algunos ejemplos de cómo se puede utilizar la propiedad “height” en CSS de maneras más avanzadas y creativas. Siempre es recomendable experimentar y probar diferentes opciones para lograr el diseño deseado.
Padding en CSS
Puedes utilizar unidades absolutas como pixels o unidades relativas como porcentajes para establecer el tamaño del padding.
También es posible establecer el padding para cada lado individualmente (arriba, abajo, derecha, izquierda) utilizando las propiedades padding-top, padding-right, padding-bottom, y padding-left respectivamente.
El padding se añade al tamaño total del elemento y puede afectar al tamaño del elemento y cómo se posiciona en relación con otros elementos en la página.
Ejemplo de uso
Un ejemplo de uso de la propiedad padding en CSS junto con HTML podría ser el siguiente:
<!DOCTYPE html>
<html>
<head>
<style>
/* establece un relleno de 20px en todos los lados del elemento con id "miDiv" */
#miDiv {
padding: 20px;
}
</style>
</head>
<body>
<div id="miDiv">
<p>Este es el contenido de mi div</p>
</div>
</body>
</html>
En este ejemplo, se establece un relleno de 20 pixeles en todos los lados del elemento “div” que tiene un id “miDiv”. Esto creará un espacio adicional de 20 pixeles alrededor del contenido del elemento “div” y puedes verlo en el navegador.
Otro ejemplo, utilizando las propiedades padding individuales:
<!DOCTYPE html>
<html>
<head>
<style>
/* establece un relleno de 10px en la parte superior, 15px en la parte derecha, 5px en la parte inferior y 20px en la parte izquierda del elemento con id "miParrafo" */
#miParrafo {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 20px;
}
</style>
</head>
<body>
<p id="miParrafo">Este es el contenido de mi párrafo</p>
</body>
</html>
En este ejemplo se establece un relleno de 10 pixeles en la parte superior, 15 pixeles en la parte derecha, 5 pixeles en la parte inferior y 20 pixeles en la parte izquierda del elemento “p” con id “miParrafo”. Puedes ver el resultado en el navegador.
Es importante notar que puedes usar cualquier unidad de medida válida en CSS, como pixels, em, rem, %, etc.
Valores
La propiedad padding en CSS puede tener los siguientes valores:
Un valor único: Este valor se aplicará a todos los lados del elemento. Por ejemplo, padding: 20px; establece un relleno de 20 pixels en todos los lados.
Dos valores: El primer valor se aplicará al relleno superior e inferior, y el segundo valor se aplicará al relleno izquierdo y derecho. Por ejemplo, padding: 10px 20px; establece un relleno de 10 pixels en la parte superior e inferior y 20 pixels en la parte izquierda y derecha.
Tres valores: El primer valor se aplicará al relleno superior, el segundo valor se aplicará al relleno izquierdo y derecho, y el tercer valor se aplicará al relleno inferior. Por ejemplo, padding: 10px 20px 30px; establece un relleno de 10 pixels en la parte superior, 20 pixels en la parte izquierda y derecha y 30 pixels en la parte inferior.
Cuatro valores: El primer valor se aplicará al relleno superior, el segundo valor se aplicará al relleno derecho, el tercer valor se aplicará al relleno inferior, y el cuarto valor se aplicará al relleno izquierdo. Por ejemplo, padding: 10px 20px 30px 40px; establece un relleno de 10 pixels en la parte superior, 20 pixels en la parte derecha, 30 pixels en la parte inferior, y 40 pixels en la parte izquierda.
Además de estos valores, también se pueden especificar valores de relleno mediante unidades de medida, como pixels, em, rem, %, etc. Por ejemplo, padding: 2em; o padding: 10%;
Otros valores
Además de los valores numéricos y de unidades de medida mencionados anteriormente, también se pueden usar algunas palabras clave especiales en la propiedad padding en CSS. Estos incluyen:
inherit: El relleno se hereda del elemento padre. Por ejemplo, si un elemento div tiene un relleno de 20px y un elemento p dentro de ese div tiene padding: inherit;, el elemento p también tendrá un relleno de 20px.
initial: El relleno se establece en su valor inicial. El valor inicial es 0 para todas las propiedades de relleno.
unset: El relleno se establece en el valor predeterminado del navegador o en el valor heredado del elemento padre si existe.
Propiedades relacionadas
Existen algunas propiedades relacionadas a padding en CSS que te permiten controlar el relleno de un elemento de manera más precisa:
padding-top: Establece el relleno en la parte superior del elemento.
padding-right: Establece el relleno en la parte derecha del elemento.
padding-bottom: Establece el relleno en la parte inferior del elemento.
padding-left: Establece el relleno en la parte izquierda del elemento.
Estas propiedades son similares a padding, pero te permiten establecer el relleno para cada lado de un elemento de forma individual, lo que te permite tener un control más preciso sobre el diseño.
Otras propiedades relacionadas con padding son:
margin: establece el margen alrededor del elemento, similar al padding, pero es el espacio vacío exterior del elemento.
border: establece el borde alrededor del elemento, el cual rodea al padding y al contenido del elemento.
box-sizing: permite establecer si el ancho y alto del elemento incluyen el padding y el borde o solo el contenido del mismo.
Todas estas propiedades son muy útiles para crear diseños precisos y controlar cómo los elementos se ven en la página.
Ejemplos
Aquí te muestro algunos ejemplos de cómo usar las propiedades relacionadas a padding en CSS:
/* establece un relleno de 20px en la parte superior de un elemento */
.ejemplo1 {
padding-top: 20px;
}
/* establece un relleno de 10px en la parte derecha y 30px en la parte izquierda de un elemento */
.ejemplo2 {
padding-right: 10px;
padding-left: 30px;
}
/* establece un relleno de 40px en la parte inferior y un margen de 20px alrededor del elemento */
.ejemplo3 {
padding-bottom: 40px;
margin: 20px;
}
/* establece un borde de 1px alrededor del elemento y un relleno de 10px */
.ejemplo4 {
border: 1px solid black;
padding: 10px;
}
/* establece el ancho y alto del elemento para incluir el padding y el borde */
.ejemplo5 {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
}
Es importante mencionar que estos ejemplos son solo ilustrativos y debes ajustar los valores de acuerdo a tus necesidades y diseño.
También es recomendable que los estilos se apliquen mediante una hoja de estilos en lugar de utilizar la etiqueta style en el HTML.
Más ejemplos
Aquí te muestro algunos ejemplos adicionales de cómo usar la propiedad padding en diferentes contextos:
/* establece un relleno de 10px en todos los lados de un elemento */
.ejemplo6 {
padding: 10px;
}
/* establece un relleno de 5% en la parte superior e inferior y 10px en la parte izquierda y derecha de un elemento */
.ejemplo7 {
padding: 5% 10px;
}
/* establece un relleno de 30px en la parte superior, 0 en la parte derecha, 20px en la parte inferior y 10px en la parte izquierda de un elemento */
.ejemplo8 {
padding: 30px 0 20px 10px;
}
/* establece un relleno de 1em en la parte superior e inferior y 2em en la parte izquierda y derecha de un elemento */
.ejemplo9 {
padding: 1em 2em;
}
/* establece un relleno de 10px en todos los lados de un elemento, y aplica un borde de 1px */
.ejemplo10 {
padding: 10px;
border: 1px solid black;
}
Además, en algunos casos, puede ser útil utilizar la técnica de CSS calc() para calcular el padding en función de otras dimensiones del elemento o del navegador, esto puede permitirte tener un diseño más adaptable y dinámico.
En efecto, la técnica de calc() en CSS te permite realizar operaciones matemáticas en las propiedades de estilo, incluyendo padding. Por ejemplo, puedes calcular el padding en función del ancho del elemento:
/* establece un relleno del 10% del ancho del elemento en todos los lados */
.ejemplo11 {
width: 300px;
padding: calc(10% - 15px);
}
Otra manera de utilizar calc() es restar un valor fijo del ancho o alto del elemento para calcular el padding, esto permite adaptar el addingp de acuerdo al tamaño de la pantalla o al tamaño del elemento.
/* establece un relleno de 30px en la parte superior, 20px en la parte derecha, 10px en la parte inferior y 15px en la parte izquierda de un elemento */
.ejemplo12 {
width: 300px;
height: 200px;
padding: calc(50% - 30px) 20px calc(25% - 10px) calc(12.5% - 15px);
}
En este caso, el padding se establece en un porcentaje del ancho y alto del elemento, permitiendo una mayor flexibilidad en el diseño. Esta técnica es especialmente útil en diseños responsivos, donde el tamaño de la pantalla puede cambiar y se requiere ajustar el padding.
Outline en CSS
El borde del resaltado puede ser de un color, un estilo y un grosor específico y puede ser personalizado utilizando varias propiedades de CSS.
La sintaxis para establecer un borde de resaltado es la siguiente:
outline: [color] [style] [width];
outline-color: El color del borde de resaltado. Puede ser un color en formato RGB, hexadecimal, nombre de color, etc. También se puede establecer como «invert» que invierte el color del borde con respecto al fondo del elemento o «currentColor» que toma el color actual del texto.
outline-style: El estilo del borde de resaltado. Puede ser uno de los siguientes valores: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset.
outline-width: El grosor del borde de resaltado. Puede ser especificado en pixels (px), puntos (pt), picas (pc), milímetros (mm), centímetros (cm), pulgadas (in), puntos de pantalla (dppx), puntos de pantalla independiente (dpi), o en unidades relativas como em o %.
Ejemplo:
Ejemplo de uso de la propiedad “outline” para establecer un borde de resaltado verde de 2px de grosor con estilo “dotted” alrededor de un elemento con id “myDiv”:
#myDiv {
outline: green dotted 2px;
}
También existen propiedades específicas para cada lado del borde de resaltado, como “outline-top”, “outline-right”, “outline-bottom” y “outline-left”, que le permiten establecer diferentes valores para cada lado del borde.
Otra propiedad útil es la “outline-offset” que te permite especificar la distancia entre el borde de resaltado y el elemento.
Es importante tener en cuenta que los bordes de resaltado no afectan al tamaño de la caja de un elemento, por lo que no afectan a la posición de otros elementos en la página.
También es importante tener en cuenta que los bordes de resaltado no son compatibles con todos los navegadores.
Ejemplos
Estilos de contorno
La propiedad «outline-style» en CSS es utilizada para establecer el estilo del borde de resaltado alrededor de un elemento. Los valores posibles para esta propiedad son:
none: No se dibuja ningún borde.
hidden: El mismo comportamiento que “none”.
dotted: El borde es dibujado con puntos.
dashed: El borde es dibujado con líneas discontinuas.
solid: El borde es dibujado con una línea continua.
double: El borde es dibujado con dos líneas paralelas.
groove: El borde es dibujado con un efecto “ranura” (3D).
ridge: El borde es dibujado con un efecto “cresta” (3D).
inset: El borde es dibujado con un efecto “empotrado” (3D).
outset: El borde es dibujado con un efecto “saliente” (3D).
Aquí te dejo algunos ejemplos de código HTML y CSS que utilizan la propiedad «outline-style» con diferentes valores:
Borde de resaltado con estilo “none”:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 300px;
height: 100px;
background-color: lightblue;
outline-style: none;
outline-color: blue;
outline-width: 2px;
}
</style>
</head>
<body>
<div id="myDiv">Contenido del div</div>
</body>
</html>
Borde de resaltado con estilo “dotted”: <!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 300px;
height: 100px;
background-color: lightblue;
outline-style: none;
outline-color: blue;
outline-width: 2px;
}
</style>
</head>
<body>
<div id="myDiv">Contenido del div</div>
</body>
</html>
Borde de resaltado con estilo “dotted”:
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 300px;
height: 100px;
background-color: lightblue;
outline-style: dotted;
outline-color: #ff0000;
outline-width: 2px;
}
</style>
</head>
<body>
<div id="myDiv">Contenido del div</div>
</body>
</html>
