如何将div正方形元素的右侧高度调整为指定像素值

原生border属性不支持单独设置某一侧边框的独立高度，要实现右侧边框高度为指定的5px，无需修改原有HTML结构，以下是两种可直接复用的实现方式：

方案1：伪元素模拟（兼容性最好，推荐使用） #

核心思路是去掉元素原生的右侧边框，用::after伪元素模拟自定义高度的右侧边框，可自由控制边框的位置、尺寸。
完整CSS代码：

.square {
  position: relative;
  height: 14px;
  width: 14px;
  border: 2px solid #4faadf;
  /* 移除原生右侧边框 */
  border-right: none;
}

.square::after {
  content: "";
  position: absolute;
  /* 定位到元素最右侧 */
  right: 0;
  /* 以下两行实现右侧边框垂直居中，要顶部对齐就删掉这两行加 top: 0; 要底部对齐就加 bottom: 0; */
  top: 50%;
  transform: translateY(-50%);
  /* 和原生边框宽度保持一致 */
  width: 2px;
  /* 你需要的右侧高度值 */
  height: 5px;
  /* 和原生边框颜色保持一致 */
  background-color: #4faadf;
}

方案2：clip-path裁剪（无需伪元素） #

核心思路是保留原生边框，通过裁剪路径控制元素的可见区域，只显示指定高度的右侧边框部分，不需要新增伪元素。
完整CSS代码：

.square {
  height: 14px;
  width: 14px;
  border: 2px solid #4faadf;
  /* 裁剪路径默认让5px高的右侧边框垂直居中，要调整位置修改对应坐标值即可 */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(50% - 2.5px),
    calc(100% - 2px) calc(50% - 2.5px),
    calc(100% - 2px) calc(50% + 2.5px),
    100% calc(50% + 2.5px),
    100% 100%,
    0 100%
  );
}

调整说明 #

• 如果需要修改右侧边框的对齐方式（顶部/底部/居中），修改代码中对应的定位或裁剪坐标即可
• 如果调整了边框宽度、颜色、目标高度，同步修改代码中对应属性值保证效果统一

内容的提问来源于stack exchange，提问作者Alphy Gacheru