可以使用CSS来实现边界的宽度根据矩形的宽度而改变。以下是一个示例代码：

HTML:

CSS:

.rectangle {
  width: 200px; /* 矩形的初始宽度 */
  height: 100px;
  border: 2px solid black; /* 初始边界宽度 */
  transition: width 0.5s; /* 添加过渡效果 */
}

.rectangle:hover {
  width: 300px; /* 鼠标悬停时矩形的宽度 */
  border-width: calc(0.01 * var(--width))px; /* 边界宽度根据矩形的宽度计算 */
}

在这个示例中，我们使用了CSS的transition属性来添加一个过渡效果，使矩形的宽度在改变时平滑过渡。鼠标悬停在矩形上时，矩形的宽度会发生变化，并且边界的宽度也会根据矩形的宽度而改变。

在border-width属性中，我们使用了calc()函数来计算边界的宽度。calc()函数允许我们在CSS中进行一些简单的计算。在这里，我们将矩形的宽度乘以0.01，并将结果以像素为单位设置为边界的宽度。

注意：在这个示例中，我们使用了CSS变量--width来保存矩形的宽度值。这是因为CSS无法直接在border-width属性中使用动态计算的值。所以我们先将矩形的宽度赋值给CSS变量，然后在border-width属性中使用这个变量。

为了使这个示例正常工作，你需要将HTML代码嵌入到你的网页中，并将CSS代码添加到你的CSS文件中，或者在