如何为Bootstrap边框设置自定义十六进制颜色？

当然可以给Bootstrap边框设置自定义十六进制颜色，以下是几种实用方法：

方法1：自定义CSS类（推荐，适合多元素复用） #

直接在样式代码里定义一个专属边框类，指定目标颜色，再给需要的div添加这个类即可。如果Bootstrap预设样式优先级更高，可借助!important强制覆盖（对新手更友好）。

修改后的完整代码示例：

<!DOCTYPE html>
<html>
<body>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="border rounded border-custom">
  <prompt>Lorem Ipsum</prompt>
</div>

<style type="text/css">
  prompt {
    color: #cc6666;
    vertical-align: middle;
  }
  
  .border-custom {
    border-color: #cc6666 !important;
  }
</style>
</body>
</html>

方法2：内联样式（快速修改单个元素） #

如果仅需给某一个div设置自定义边框，直接用内联样式最快捷，无需额外编写CSS类：

<div class="border rounded" style="border-color: #cc6666;">
  <prompt>Lorem Ipsum</prompt>
</div>

方法3：修改Bootstrap源码（全局自定义，适合项目级需求） #

若你使用Bootstrap的Sass源码开发（而非直接引用CDN的CSS文件），可修改$border-colors变量添加自定义颜色，重新编译后就能像使用border-primary一样调用自定义类：

$border-colors: (
  "primary": $primary,
  "secondary": $secondary,
  // 保留原有预设颜色
  "custom": #cc6666
);

这种方式适合需要在全局范围内复用该颜色边框的场景。

内容的提问来源于stack exchange，提问作者J.Galt