Как сделать границу внутри элемента div с помощью CSS

Если вы хотите нарисовать границы внутри прямоугольного блока, есть очень простое решение — просто используйте 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>

Читайте также

Похожие примеры: