Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 15 из 53 · 9 мин
border-width, border-style, border-color, border-radius, outline и outline-offset.
Углы карточек скругли на 16px, кнопки — полностью круглые.
И обводка фокуса пусть будет заметной, но не ломает вёрстку.
border-width1px, thin, по сторонам — border-top-width.<style>
.box { border-style: solid; border-width: 0 0 3px; border-color: #c8763a; }
</style>
<div class="box">Линия снизу</div>border-stylesolid, dashed, dotted, double, none.<style>
.drop { border: 2px dashed #c8763a; padding: 12px; }
</style>
<div class="drop">Перетащите фото</div>border-colorcurrentColor.<style>
input { border: 2px solid; border-color: crimson; }
</style>
<input value="Ошибка">border-radius16px — углы, 50% — круг, 999px — «пилюля».<style>
.card { border-radius: 16px; background: #fdf6ec; padding: 12px; } .pill { border-radius: 999px; padding: 6px 16px; }
</style>
<div class="card">Карточка</div><button class="pill">Кнопка</button>outline<style>
button:focus-visible { outline: 3px solid #c8763a; }
</style>
<button>Нажми Tab</button>outline-offset<style>
button { outline: 3px solid #c8763a; outline-offset: 4px; }
</style>
<button>С отступом</button>Никогда не пиши outline: none без замены — Лев перестанет видеть фокус.
Скругли .card на 16px, кнопке .btn сделай border-radius: 999px, а при :focus-visible — outline: 3px solid #c8763a с outline-offset: 3px.
Выберите один ответ.
Чем outline отличается от border?
Введите короткий ответ без лишних пробелов.
Какое значение border-radius превращает квадрат в круг? Введи значение.
Проверяем состояние обучения…