Если вы хотите нарисовать границы внутри прямоугольного блока, есть очень простое решение — просто используйте CSS-свойство outline вместо border и переместите его внутри рамки элемента, используя свойство CSS3 outline-offset с отрицательным значением.
Однако это решение не подойдет для элементов со скругленными углами. Но вы все равно можете рисовать границы внутри круглого прямоугольника или элемента с закругленными углами, используя свойство box-shadow.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Setting Border inside DIV Element</title>
<style>
.box {
width: 180px;
height: 180px;
background: black;
margin: 20px 50px;
}
.circle {
border-radius: 50%;
}
.inner-border {
border: 20px solid black;
box-shadow: inset 0px 0px 0px 10px red;
box-sizing: border-box; /* Включаем отступ и границу в ширину и высоту элемента */
}
/* Решение CSS3 только для прямоугольной формы */
.inner-outline {
outline: 10px solid red;
outline-offset: -30px;
}
</style>
</head>
<body>
<h2>Граница внутри прямоугольной и круглой формы</h2>
<div class="box circle inner-border"></div>
<div class="box inner-border"></div>
<hr>
<h2>Контур внутри прямоугольной формы</h2>
<div class="box inner-outline"></div>
</body>
</html>
