Movatterモバイル変換

[0]ホーム
URL:

Framework:
Hire Us Get CoreUI PRO all-access →

Bootstrap 5 Borders

Borders

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

🤖 Looking for the LLM-optimized version?View llm.md

On this page

Border

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Additive

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

Subtractive

Or remove borders:

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

Color

Change the border color using utilities built on our theme colors.

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

Using utilities you can change the border on one side only, or you can change all borders to make them different colors.

html
<spanclass="border-top border-top-primary"></span><spanclass="border-end border-end-primary"></span><spanclass="border-bottom border-bottom-primary"></span><spanclass="border-start border-start-primary"></span><spanclass="border-start border-start-primary border-end border-end-danger"></span><spanclass="border-top border-top-primary border-end border-end-danger border-bottom border-bottom-success"></span><spanclass="border border-top-primary border-end-danger border-bottom-success border-start-info"></span>

Border-width

Or modify the defaultborder-color of a component:

Dangerous heading
Changing border color and width
html
<divclass="mb-4"><labelfor="exampleFormControlInput1"class="form-label">Email address</label><inputtype="email"class="form-control border-success"id="exampleFormControlInput1"placeholder="[email protected]"></div><divclass="h4 pb-2 mb-4 text-danger border-bottom border-danger">  Dangerous heading</div><divclass="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">  Changing border color and width</div>

Opacity

Added in v4.2.6

Bootstrapborder-{color} utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our default.border-success utility.

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

We use an RGB version of our--cui-success (with the value of25, 135, 84) CSS variable and attached a second CSS variable,--cui-border-opacity, for the alpha transparency (with a default value1 thanks to a local CSS variable). That means anytime you use.border-success now, your computedcolor value isrgba(25, 135, 84, 1). The local CSS variable inside each.border-* class avoids inheritance issues so nested instances of the utilities don’t automatically have a modified alpha transparency.

Example

To change that opacity, override--cui-border-opacity via custom styles or inline styles.

This is default success border
This is 50% opacity success border
html
<divclass="border border-success p-2 mb-2">This is default success border</div><divclass="border border-success p-2"style="--cui-border-opacity: .5;">This is 50% opacity success border</div>

Or, choose from any of the.border-opacity utilities:

This is default success border
This is 75% opacity success border
This is 50% opacity success border
This is 25% opacity success border
This is 10% opacity success border
html
<divclass="border border-success p-2 mb-2">This is default success border</div><divclass="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div><divclass="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div><divclass="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div><divclass="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

Width

html
<spanclass="border border-1"></span><spanclass="border border-2"></span><spanclass="border border-3"></span><spanclass="border border-4"></span><spanclass="border border-5"></span><spanclass="border border-1 border-info"></span><spanclass="border border-2 border-info"></span><spanclass="border border-3 border-info"></span><spanclass="border border-4 border-info"></span><spanclass="border border-5 border-info"></span><spanclass="border-start border-start-1"></span><spanclass="border-start border-start-2"></span><spanclass="border-start border-start-3"></span><spanclass="border-start border-start-4"></span><spanclass="border-start border-start-5"></span><spanclass="border-start border-start-1 border-start-info"></span><spanclass="border-start border-start-2 border-start-info"></span><spanclass="border-start border-start-3 border-start-info"></span><spanclass="border-start border-start-4 border-start-info"></span><spanclass="border-start border-start-5 border-start-info"></span>

Radius

Add classes to an element to easily round its corners.

Example rounded image75x75Example top rounded image75x75Example right rounded image75x75Example bottom rounded image75x75Example left rounded image75x75
html
<imgsrc="..."class="rounded"alt="..."><imgsrc="..."class="rounded-top"alt="..."><imgsrc="..."class="rounded-end"alt="..."><imgsrc="..."class="rounded-bottom"alt="..."><imgsrc="..."class="rounded-start"alt="...">
Example small rounded image75x75Example default left rounded image75x75Example right completely round image75x75Example left rounded pill image75x75Example extra large bottom rounded image75x75
html
<imgsrc="..."class="rounded-bottom-1"alt="..."><imgsrc="..."class="rounded-start-2"alt="..."><imgsrc="..."class="rounded-end-circle"alt="..."><imgsrc="..."class="rounded-start-pill"alt="..."><imgsrc="..."class="rounded-5 rounded-top-0"alt="...">

Sizes

Use the scaling classes for larger or smaller rounded corners. Sizes range from0 to5 includingcircle andpill, and can be configured by modifying the utilities API.

Example non-rounded image75x75Example small rounded image75x75Example default rounded image75x75Example large rounded image75x75Example larger rounded image75x75Example extra large rounded image75x75Completely round image75x75Rounded pill image150x75
html
<imgsrc="..."class="rounded-0"alt="..."><imgsrc="..."class="rounded-1"alt="..."><imgsrc="..."class="rounded-2"alt="..."><imgsrc="..."class="rounded-3"alt="..."><imgsrc="..."class="rounded-4"alt="..."><imgsrc="..."class="rounded-5"alt="..."><imgsrc="..."class="rounded-circle"alt="..."><imgsrc="..."class="rounded-pill"alt="...">

Customizing

CSS variables

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.0.0 for consistency--#{$prefix}border-radius-pill:#{$border-radius-pill};

Sass variables

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;

Sass mixins

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-start-end-radius:valid-radius($radius);border-end-end-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-start-start-radius:valid-radius($radius);border-end-start-radius:valid-radius($radius);}}@mixin border-top-start-radius($radius:$border-radius){@if$enable-rounded{border-start-start-radius:valid-radius($radius);}}@mixin border-top-end-radius($radius:$border-radius){@if$enable-rounded{border-start-end-radius:valid-radius($radius);}}@mixin border-bottom-end-radius($radius:$border-radius){@if$enable-rounded{border-end-end-radius:valid-radius($radius);}}@mixin border-bottom-start-radius($radius:$border-radius){@if$enable-rounded{border-end-start-radius:valid-radius($radius);}}

Utilities API

Border utilities are declared in our utilities API inscss/_utilities.scss.Learn how to use the utilities API.

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-inline-end,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-inline-start,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),"border-top-color":(property:border-top-color,class:border-top,values:map.merge($theme-colors,("white":$white)),vars:true),"border-end-color":(property:border-inline-end-color,class:border-end,values:map.merge($theme-colors,("white":$white)),vars:true,),"border-bottom-color":(property:border-bottom-color,class:border-bottom,values:map.merge($theme-colors,("white":$white)),vars:true),"border-start-color":(property:border-inline-start-color,class:border-start,values:map.merge($theme-colors,("white":$white)),vars:true,),"border-width":(property:border-width,class:border,values:$border-widths),"border-top-width":(property:border-top-width,class:border-top,values:$border-widths),"border-end-width":(property:border-inline-end-width,class:border-end,values:$border-widths,),"border-bottom-width":(property:border-bottom-width,class:border-bottom,values:$border-widths),"border-start-width":(property:border-inline-start-width,class:border-start,values:$border-widths,),"subtle-border-color":(property:border-color,class:border,values:$utilities-border-subtle),"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-radiusborder-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-start-end-radiusborder-end-end-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-radiusborder-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-end-start-radiusborder-start-start-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))),
[8]ページ先頭
©2009-2025 Movatter.jp