Bootstrap 4 - Bordes
Descripción
La utilidad Borde proporciona estilo, color y radio del borde de un elemento.
Aditivo y sustractivo
El borde del elemento se puede agregar o eliminar mediante el uso de utilidades aditivas y sustractivas del borde como se muestra a continuación:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<br>
<div class = "text-white bg-secondary">
<h2>Additive</h2>
<span class = "border">border</span>
<span class = "border-top">border-top</span>
<span class = "border-right">border-right</span>
<span class = "border-bottom">border-bottom</span>
<span class = "border-left">border-left</span>
<br>
<br>
</div>
<div class = "text-white bg-secondary">
<h2>Subtractive</h2>
<span class = "border border-0">border-0</span>
<span class = "border border-top-0">border-top-0</span>
<span class = "border border-right-0">border-right-0</span>
<span class = "border border-bottom-0">border-bottom-0</span>
<span class = "border border-left-0">border-left-0</span>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Color del borde
Puede establecer el color para el borde de un elemento utilizando los colores del tema como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container">
<h2>Border Color</h2>
<div class = "bordercolor">
<p>border-primary, border-secondary, border-success</p>
<span class = "">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-primary" >
</span>
<span class = "">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-secondary" >
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-success">
</span>
<br>
<br>
<p>border-danger, border-warning, border-info</p>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-danger">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-warning">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-info">
</span>
<br>
<br>
<p>border-light, border-dark, border-white</p>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-light">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-dark">
</span>
<span>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "border border-white">
</span>
<br>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado:
Salida
Radio de borde
Puede agregar las esquinas redondeadas a un elemento utilizando las clases (superior redondeada, redondeada a la derecha, etc.) como se muestra en el siguiente ejemplo:
Ejemplo
<html lang = "en">
<head>
<!-- Meta tags -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<!-- Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<title>Bootstrap 4 Example</title>
</head>
<body>
<div class = "container-fluid bg-secondary">
<br>
<h2>Border Radius</h2>
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded ">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-top">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-right">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-bottom">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-left">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-circle">
<img src = "https://www.tutorialspoint.com/bootstrap/images/download.png"
alt = "..." class = "rounded-0">
<br>
<br>
<br>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>
</body>
</html>Producirá el siguiente resultado: