Skip to main content Skip to docs navigation
Ver en GitHub

Bordes (Borders)

Utiliza las utilidades de borde para dar estilo rápidamente al borde y al radio de borde (border-radius) de un elemento. Excelente para imágenes, botones o cualquier otro elemento.

En esta página

Borde (Border)

Utiliza las utilidades de borde para agregar o quitar los bordes de un elemento. Elige entre todos los bordes o uno a la vez.

Aditivo

Agregar bordes a elementos personalizados:

html 
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Sustractivo

O eliminar bordes:

html 
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

Color

Las utilidades de borde como .border-* que se generan a partir de nuestro mapa Sass original $theme-colors aún no responden a los modos de color, sin embargo, cualquier utilidad .border-*-subtle sí lo hará. Esto se resolverá en la versión 6.

Cambia el color del borde utilizando utilidades basadas en los colores de nuestro tema.

html 
<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>

Or modify the default border-color of a component:

Encabezado peligroso
Cambiar el color y el ancho del borde
html 
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Dirección de correo electrónico</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Encabezado peligroso
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Cambiar el color y el ancho del borde
</div>

Opacidad (Opacity)

Agregado en v5.2.0

Las utilidades border-{color} de Bootstrap se generan con Sass utilizando variables CSS. Esto permite cambios de color en tiempo real sin compilación y cambios dinámicos de transparencia alfa.

Cómo funciona

Considera nuestra utilidad .border-success predeterminada.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

Usamos una versión RGB de nuestra variable CSS --bs-success (con el valor de 25, 135, 84) y adjuntamos una segunda variable CSS, --bs-border-opacity, para la transparencia alfa (con un valor predeterminado 1 gracias a una variable CSS local). Eso significa que cada vez que uses .border-success ahora, tu valor de color (color) calculado será rgba(25, 135, 84, 1). La variable CSS local dentro de cada clase .border-* evita problemas de herencia para que las instancias anidadas de las utilidades no tengan automáticamente una transparencia alfa modificada.

Ejemplo

Para cambiar esa opacidad, sobrescribe --bs-border-opacity a través de estilos personalizados o estilos en línea.

Este es el borde success predeterminado
Este es el borde success con 50% de opacidad
html 
<div class="border border-success p-2 mb-2">Este es el borde success predeterminado</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">Este es el borde success con 50% de opacidad</div>

O bien, elige entre cualquiera de las utilidades .border-opacity:

Este es el borde success predeterminado
Este es el borde success con 75% de opacidad
Este es el borde success con 50% de opacidad
Este es el borde success con 25% de opacidad
Este es el borde success con 10% de opacidad
html 
<div class="border border-success p-2 mb-2">Este es el borde success predeterminado</div>
<div class="border border-success p-2 mb-2 border-opacity-75">Este es el borde success con 75% de opacidad</div>
<div class="border border-success p-2 mb-2 border-opacity-50">Este es el borde success con 50% de opacidad</div>
<div class="border border-success p-2 mb-2 border-opacity-25">Este es el borde success con 25% de opacidad</div>
<div class="border border-success p-2 border-opacity-10">Este es el borde success con 10% de opacidad</div>

Ancho (Width)

html 
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Radio (Radius)

Agrega clases a un elemento para redondear fácilmente sus esquinas.

Ejemplo de imagen redondeada75x75 Ejemplo de imagen redondeada en la parte superior75x75 Ejemplo de imagen redondeada a la derecha75x75 Ejemplo de imagen redondeada en la parte inferior75x75 Ejemplo de imagen redondeada a la izquierda75x75
html 
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">

Tamaños

Usa las clases de escala para esquinas redondeadas más grandes o más pequeñas. Los tamaños varían de 0 a 5, incluidos circle y pill, y se pueden configurar modificando la API de utilidades.

Ejemplo de imagen no redondeada75x75 Ejemplo de imagen redondeada pequeña75x75 Ejemplo de imagen redondeada predeterminada75x75 Ejemplo de imagen redondeada grande75x75 Ejemplo de imagen redondeada más grande75x75 Ejemplo de imagen redondeada extra grande75x75 Imagen completamente redonda75x75 Imagen de píldora redondeada150x75
html 
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
Ejemplo de imagen redondeada pequeña75x75 Ejemplo de imagen redondeada a la izquierda predeterminada75x75 Ejemplo de imagen completamente redonda a la derecha75x75 Ejemplo de imagen de píldora redondeada a la izquierda75x75 Ejemplo de imagen redondeada en la parte inferior extra grande75x75
html 
<img src="..." class="rounded-bottom-1" alt="...">
<img src="..." class="rounded-start-2" alt="...">
<img src="..." class="rounded-end-circle" alt="...">
<img src="..." class="rounded-start-pill" alt="...">
<img src="..." class="rounded-5 rounded-top-0" alt="...">

CSS

Variables

Agregado en v5.2.0
scss/_root.scss 
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};

--#{$prefix}border-radius: #{$border-radius};
--#{$prefix}border-radius-sm: #{$border-radius-sm};
--#{$prefix}border-radius-lg: #{$border-radius-lg};
--#{$prefix}border-radius-xl: #{$border-radius-xl};
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill: #{$border-radius-pill};

Variables Sass

scss/_variables.scss 
$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);
$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);
scss/_variables.scss 
$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-xxl:           2rem;
$border-radius-pill:          50rem;

Variables para establecer border-color en utilidades .border-*-subtle en modo claro y oscuro:

scss/_variables.scss 
$primary-border-subtle:   tint-color($primary, 60%);
$secondary-border-subtle: tint-color($secondary, 60%);
$success-border-subtle:   tint-color($success, 60%);
$info-border-subtle:      tint-color($info, 60%);
$warning-border-subtle:   tint-color($warning, 60%);
$danger-border-subtle:    tint-color($danger, 60%);
$light-border-subtle:     $gray-200;
$dark-border-subtle:      $gray-500;
scss/_variables-dark.scss 
$primary-border-subtle-dark:        shade-color($primary, 40%);
$secondary-border-subtle-dark:      shade-color($secondary, 40%);
$success-border-subtle-dark:        shade-color($success, 40%);
$info-border-subtle-dark:           shade-color($info, 40%);
$warning-border-subtle-dark:        shade-color($warning, 40%);
$danger-border-subtle-dark:         shade-color($danger, 40%);
$light-border-subtle-dark:          $gray-700;
$dark-border-subtle-dark:           $gray-800;

Mapas Sass

Los colores de borde adaptables al modo de color también están disponibles como un mapa Sass:

scss/_maps.scss 
$theme-colors-border-subtle: (
  "primary": $primary-border-subtle,
  "secondary": $secondary-border-subtle,
  "success": $success-border-subtle,
  "info": $info-border-subtle,
  "warning": $warning-border-subtle,
  "danger": $danger-border-subtle,
  "light": $light-border-subtle,
  "dark": $dark-border-subtle,
);
scss/_maps.scss 
$theme-colors-border-subtle-dark: (
  "primary": $primary-border-subtle-dark,
  "secondary": $secondary-border-subtle-dark,
  "success": $success-border-subtle-dark,
  "info": $info-border-subtle-dark,
  "warning": $warning-border-subtle-dark,
  "danger": $danger-border-subtle-dark,
  "light": $light-border-subtle-dark,
  "dark": $dark-border-subtle-dark,
);

Mixins Sass

scss/mixins/_border-radius.scss 
@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

API de utilidades de Sass

Las utilidades de borde se declaran en nuestra API de utilidades en scss/_utilities.scss. Aprende a utilizar la API de utilidades.

scss/_utilities.scss 
"border": (
  property: border,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-top": (
  property: border-top,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-end": (
  property: border-right,
  class: border-end,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-bottom": (
  property: border-bottom,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-start": (
  property: border-left,
  class: border-start,
  values: (
    null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
    0: 0,
  )
),
"border-color": (
  property: border-color,
  class: border,
  local-vars: (
    "border-opacity": 1
  ),
  values: $utilities-border-colors
),
"subtle-border-color": (
  property: border-color,
  class: border,
  values: $utilities-border-subtle
),
"border-width": (
  property: border-width,
  class: border,
  values: $border-widths
),
"border-opacity": (
  css-var: true,
  class: border-opacity,
  values: (
    10: .1,
    25: .25,
    50: .5,
    75: .75,
    100: 1
  )
),
scss/_utilities.scss 
"rounded": (
  property: border-radius,
  class: rounded,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-top": (
  property: border-top-left-radius border-top-right-radius,
  class: rounded-top,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-end": (
  property: border-top-right-radius border-bottom-right-radius,
  class: rounded-end,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-bottom": (
  property: border-bottom-right-radius border-bottom-left-radius,
  class: rounded-bottom,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),
"rounded-start": (
  property: border-bottom-left-radius border-top-left-radius,
  class: rounded-start,
  values: (
    null: var(--#{$prefix}border-radius),
    0: 0,
    1: var(--#{$prefix}border-radius-sm),
    2: var(--#{$prefix}border-radius),
    3: var(--#{$prefix}border-radius-lg),
    4: var(--#{$prefix}border-radius-xl),
    5: var(--#{$prefix}border-radius-xxl),
    circle: 50%,
    pill: var(--#{$prefix}border-radius-pill)
  )
),