Как сделать отступ от border и сохранить цвет отступа?

Question

Как сделать отступ внутренний отступ от границ и задать цвет отступа? На картинке виден отступ от верхней и нижней границы и причем назначен белый цвет. Смотрите картинку, для
примера код: border-top: 2px solid; border-bottom: 2px solid; color: #808080; background-color: #00bfff;

Как дальше реализовать это? Буду благодарен за примеры и решение

Answer 1

можно сделать так (через прозрачный :after элемент с границами):

.block {
    position: relative;
    display: inline-block;
    
    padding: 10px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    
    background: lime;
}

.block:after {
    content: '';
    
    position: absolute;
    left: 0px;
    top: 0px;
    
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    
    height: calc(100% - 2 * 2px);
    width: 100%;
    
    pointer-events: none;
}

<div class = 'block'>Какой-то текст</div>

или так (через внутреннюю чёткую тень):

.block {
    position: relative;
    display: inline-block;
    
    padding: 10px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    
    background: lime;
    
    box-shadow: inset 0 0 0px 2px white;
}

<div class = 'block'>Какой-то текст</div>

правда тут видно что справа и слева не хватает пикселей

Answer 2

На мой взгляд, проще и правильнее будет использование градиента:

.edges {
  display: inline-block;
  padding: .3em;
  background: linear-gradient(to bottom, #808080 2px, transparent 2px, transparent 4px, #d1ecfe 4px, #d1ecfe calc(100% - 4px), transparent calc(100% - 4px), transparent calc(100% - 2px), #808080 calc(100% - 2px));
  font: bold 16px sans-serif;
  color: #014d80;
}

<div class="edges">AUTOMOBILES</div>

БЛОГ НА HUSL

Как сделать отступ от border и сохранить цвет отступа?

Ответы (2 шт):