Как сделать обводку css?

Обводка задаётся свойством border, оно принимает толщину, стиль и цвет одной строкой: border: 2px solid #333. Стиль может быть solid, dashed, dotted или double, у каждого свой визуальный эффект. Если нужна обводка только с одной стороны, используйте border-top, border-right и так далее отдельно. Есть и другой инструмент, outline, он визуально похож на border, но не влияет на размеры блока и не занимает место в layout, поэтому его часто используют для состояния фокуса при навигации с клавиатуры. Ещё вариант, text-stroke для обводки именно текста буквами, но это менее стандартное свойство, поддержку лучше проверить в свежей таблице совместимости перед использованием в продакшене.

у меня border сдвигал всю вёрстку вправо, добавил box-sizing border-box и стало нормально

• border: толщина, стиль, цвет одной строкой.
• border-radius округляет углы обводки вместе с блоком.
• outline не двигает соседние элементы, border двигает, если не поставлен box-sizing: border-box.
• Для фокуса юзай outline, а не убирай его вообще ради красоты.