Css 不带填充的HTML边框，或元素的自定义长度边框

如何将边框添加到宽度应小于元素的DIV中？像这样：

目前我有：

第1列

border-bottom: 1px solid grey;

第2栏

border-left: 1px solid grey;
border-bottom: 1px solid grey;

第3栏

border: none;

第4栏

border-left: 1px solid grey;

我希望边框不要占用div填充空间，如下所示：

---

您可以使用两种方法实现此效果-一种用于顶部/底部边框，另一种用于左/右边框：

。剪裁的边框{
填充：0.2米；
背景：
线性梯度（至底部，
红色4px，
透明4px，
透明钙（100%-4px），
红色钙（100%-4px）
),
线性梯度（向右，
红色5px，
透明5px，
透明钙（100%-4px），
红色钙（100%-4px）
);
背景大小：95%100%，100%50%；
背景重复：无重复；
背景位置：中心；
}

带有红色边框的标题

您可以尝试这样的渐变：

h1{
填充物：5px；
背景：
线性梯度（红色、红色）顶部中心/计算（100%-15px）5px，
线性梯度（红色，红色）底部中心/计算（100%-15px）5px，
线性梯度（红色，红色）左中心/5px计算（100%-15px），
线性梯度（红色，红色）右中心/5px计算（100%-15px）；
背景重复：无重复；
显示：内联块；
}

标题

.row1{
填充：100px 100px 100px；
显示器：flex；
}
.第1栏{
背景色：#00FFFF；
宽度：300px；
高度：150像素；
边框底部：1px纯色灰色；
}
.第2栏{
背景色：#00FFFF；
宽度：300px；
高度：150像素；
左边框：1px纯色灰色；
边框底部：1px纯色灰色；
左边距：10px；
}
.row2{
填充：0 100px 0；
显示器：flex；
}
.第3栏{
背景色：#00FFFF；
宽度：300px；
高度：150像素；
边界：无；
}
.第4栏{
背景色：#00FFFF；
宽度：300px；
高度：150像素；
左边框：1px纯色灰色；
左边距：10px；
}

我的渐变更好：p你的渐变太多：）