Коротко: в Тильде закруглить углы можно в настройках блока (там есть поле «Скругление углов» или «Радиус»), а если такого нет — через CSS в блоке «HTML» (T123) или в настройках сайта. Для картинок и кнопок применяют border-radius к нужному классу.
Где искать настройку
| Место | Что даёт |
|---|---|
| Настройки блока | радиус у карточек, форм, кнопок |
| Настройки кнопки | форма кнопки, скругление |
| Блок «HTML» (T123) | свой CSS для любых элементов |
| Настройки сайта → HTML-код | глобальные стили |
Вкладки: способы
- Выделите блок.
- Откройте «Настройки блока».
- Найдите поле со скруглением (часто в разделе «Дизайн»).
- Задайте значение и опубликуйте страницу.
Если поля нет — значит блок его не поддерживает, и нужен CSS.
- Добавьте на страницу блок «HTML» (T123).
- Впишите стиль с нужным селектором.
- Сохраните и проверьте вид.
<style>
.t-card { border-radius: 16px; overflow: hidden; }
</style>Важно найти правильный класс. Самый надёжный способ — посмотреть его в DevTools браузера.
<style>
.t-img, .t-cover__wrapper { border-radius: 20px; }
</style>Скругление картинки делают классу её контейнера плюс overflow: hidden, иначе изображение не обрежется.
<style>
.t-btn { border-radius: 999px; } /* кнопка-пилюля */
</style>Для кнопок в Тильде часто хватает встроенной настройки формы, но CSS даёт точность — например, «пилюлю» с большим радиусом.
t-...) могут отличаться между блоками и версиями. Всегда проверяйте селектор в DevTools и добавляйте свой класс, если хотите надёжности.Практика: скруглить всё одинаково
- Откройте DevTools и найдите классы нужных элементов.
- Соберите общий CSS-блок со стилями радиусов.
- Для картинок добавьте
overflow: hidden. - Задайте единое значение (например, 16px) для целостности.
- Проверьте на мобильном: радиус не должен быть «слишком большим».
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Стиль не применился | неверный селектор | взять класс в DevTools |
| Картинка с прямыми углами | нет overflow: hidden |
добавить обрезку |
| Ломается другой блок | слишком общий селектор | уточнить селектор |
| Кнопка «сплющилась» | радиус больше высоты | уменьшить или задать 999px |
Проверьте себя
Вопросы и ответы
В блок «HTML» (T123) на конкретной странице или в «Настройки сайта» → «Ещё» → HTML-код в head — для глобальных стилей.
Правый клик по элементу → «Просмотреть код» → скопируйте класс. В Тильде классы часто начинаются с t-.
Да, в CSS: border-radius: 20px 0 20px 0; — значения идут по часовой стрелке.
Если вы завязались на служебные классы Тильды, они могут измениться. Надёжнее добавлять свой класс элементу и стилизовать его.
Итоги
- Сначала проверьте встроенные настройки блока.
- Нет настройки — CSS через блок «HTML» или настройки сайта.
- Картинкам нужен
overflow: hidden. - Ищите классы в DevTools; для надёжности добавляйте свой класс.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.