Los estilos de borde en CSS - Curso de CSS3 básico - Capítulo 6


Este va a ser un capítulo introductorio a los bordes en CSS, veremos más cosas. Por el momento, vamos a ver los diferentes estilos que se pueden aplicar a los bordes.

Estilos de borde con la propiedad css border-style

La propiedad CSS border-style nos deja elegir una serie de estilos para los bordes. Veamos unos ejemplos:

Página HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Los estilos de borde en CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="solido">Borde sólido</div>
    <br>
    <div class="puntos">Borde punteado</div>
    <br>
    <div class="rayas">Borde rayado</div>
    <br>
    <div class="cresta">Borde cresta</div>
    <br>
    <div class="ranura">Borde ranura</div>
    <br>
    <div class="doble">Borde doble</div>
</body>
</html>

CSS

.solido {
    border-style: solid;
}

.puntos {
    border-style: dotted;
}

.rayas {
    border-style: dashed;
}

.cresta {
    border-style: ridge;
}

.ranura {
    border-style: groove;
}

.doble {
    border-style: double;
}

Los estilos de borde en css

Combinar varios estilos de borde para cada lado

Podemos hacer combinaciones de bordes, es decir, podemos especificar un estilo de borde para cada lado del borde.
Solo tienes que especificar un valor para cada uno de los cuatro lados del borde. El orden es importante, el primer valor afecta al lado superior del borde, el segundo al lado derecho, el tercero a la parte inferior y el cuarto al lado izquierdo. Va en el sentido de las agujas del reloj .

Página HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Los estilos de borde en CSS</title>
    <link href="estilos.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="mix">Borde mixto</div>
</body>
</html>

CSS

.mix {
    border-style: dotted dashed solid double;
}
Los estilos de borde en css con cuatro valores

También puedes especificar solo dos valores de borde. En este caso, afectará el primer valor a los bordes superior e inferior y el segundo a la izquierda y la derecha.

CSS

.mix {
    border-style: dotted dashed;
}
Los estilos de borde en css con dos valores

Hay la posibilidad de utilizar tres valores. El primero será para la parte superior, el segundo para las partes derecha e izquierda y el tercero para la parte inferior. Esta forma la utilizarás pocas veces, pero es conveniente que la conozcas.

CSS

.mix {
    border-style: dotted dashed solid;
}
Los estilos de borde en css con tres valores

Ejercicios de CSS

  1. Crea un estilo que te de como resultado este borde:
  2. Borde groove CSS
  3. Crea un estilo que te de como resultado este borde:
  4. Borde ridge y double CSS
  5. Crea un estilo que te de como resultado este borde:
  6. Borde solid dotted y dashed CSS

La solución la encontrarás aquí: Haz click aquí.


Capítulos


    Suscríbete a mi canal de YouTube para apoyarme

    Si te ha gustado este curso y crees que el trabajo merece la pena, te agradeceré eternamente que te suscribas a mi canal de YouTube para apoyarme y que pueda seguir haciendo cursos gratuitos.

    Además, si te encanta la programación, tienes un montón más de cursos gratuitos para ver.

    No solo eso, podrás participar enviándome comentarios con tus sugerencias para temas específicos o cursos completos o incluso las dudas que tengas y las intentaré ir resolviendo en los cursos que estén todavía abiertos.