Html 更改右边框的高度

我的右边框为100%高度：

border-right:1px solid #000000;

我想把它缩短一些：

---

使用CSS而不改变div的高度是否可以实现？我需要div是100%的高度，只改变边界

我看不出用普通css做这件事

---

您将需要使用多个div来创建效果。

如果将其分成两个

div

，并为外部div指定顶部和底部边框，只为内部div指定较小的高度和边距，则可以：

#外部{
显示：块；
宽度：100px；
高度：80px；
边框顶部：1件纯黑；
边框底部：1px纯黑；
}
#内在的{
显示：块；
宽度：100px；
高度：50px；
边缘顶部：10px；
右边框：1px纯黑；
}

---

您可以使用伪元素来替换右边框。由于可以选择其大小/位置，因此可以使用它模拟边框：

HTML:

支持IE8参见

---

下面是上述代码的示例

使用伪元素也可以这样做。我不知道这是否是你想要的：

`

---

---

填充并没有打破边界。真的！现在更新了我的答案…这里有css解决方法。没有看到OP提到他们不想创建另一个div…@web tiki有一个观点。不考虑伪元素。它可以在CSS中使用：help@Nimmi只有当您应用右边框的元素是另一个具有上下边框的元素的一部分时……哦，对了，我同意……边距无法完成正确的技巧：）您的小提琴是空的……这很聪明。唯一需要考虑的是IE8支持。但我认为这只是一个小小的抱怨。先生，你可以投赞成票@InternalFXIE8只支持一个伪元素

：

请参见此处：那么您的黄金。对不起，只有一票可投。你的小提琴上什么都没有。。。您可能需要添加边框…选中最右边的黑色边框。我用灰色背景和红色边框更新了我的小提琴，我想你忘了把它添加回你的答案中……是的，现在又添加了。谢谢

<div></div>

div {
    height:200px;
    width:500px;
    background:gold;
    position:relative;
    border-top:10px solid grey;
    border-bottom:2px solid #000;
}
div:after {
    content:"";
    position:absolute;
    top:20%;
    right:0;
    width:2px;
    height:60%;
    background:#000;
}

.cont {
  height : 200px;
  background: gray;
  position:relative;
}
.hr {
  width:2px;
  height:90%;
  background-color:red;
  position:absolute;
  right:0;
  top: 5%;
}

div:after{
  content:'';
  height:150px;
  width:200px;
  border-right:1px solid yellow;
  position: absolute;
  top:30px;

}