Один блок знаходиться всередині іншого. Крізь напівпрозору кордон потрібно побачити фон батька. Якщо у нащадка є свій власний фон, то потрібно його (фон дочірнього елемента) прибрати з кордону обведення блоку.
Щоб у зображення були напівпрозорі краю, крізь які просвічувала ця ж картинка, а не фон батька, краще застосувати outline.
Внутрішній border. Управління довжиною блоку
Якщо задано width: auto ;. то ширина елемента дорівнює ширині батька. Вона не збільшується за рахунок margin. border і padding.
width: auto; (за замовчуванням)
В інших випадках border. як і padding. розширює коробку елемента. Тобто якщо неправильно розрахувати width. то блок переміститься вниз, не поселившись в обмежений простір, меню буде некрасиво подовжуватися і т.п. Щоб зробити так, щоб рамка збільшувала блок, потрібно вказати box-sizing: border-box ;. Тоді border і padding не впливатимуть на ширину контейнера елемента.
border: 10px solid yellow;
padding: 10px;
box-sizing: border-box;
Пунктирна обведення всередині HTML блоку
Завдання: пройти пунктиром по периметру на деякій відстані від країв елемента. Ефект буде такий, як ніби на швейній машинці прошили полотно і залишилися на тканині стежки. Якщо у кнопки кути закруглені, фон заданий градієнт або картинкою, текст повинен виділятися мишкою і потрібно обійтися одним тегом, то єдино вірним рішенням буде скористатися: after.
Рамка у відсотках
Ширина рамки border-width може встановлюватися в будь-яких одиницях вимірювання. але не у відсотках, також як і box-shadow. і outline. Для однотонних ліній можна використовувати background. Через те, що не хочеться втрачати padding. потрібен ще й: after.
Втиснута лінія CSS
Ефект втиснула лінії досягається коли верхня смуга темніше, нижня - світліше; опуклою навпаки.