Атрибут frameborder тега <iframe>
Описание
Атрибут frameborder управляет отображением границы вокруг элемента <iframe>. Устарел в HTML5 - вместо него рекомендуется использовать CSS-свойство border.
<iframe
src="content.html"
frameborder="0"
width="600"
height="400">
</iframe>
Доступные значения:
| Значение | Эквивалент в CSS | Описание |
|---|---|---|
1 |
border: 1px solid; |
Показать границу (по умолчанию в некоторых браузерах) |
0 |
border: none; |
Скрыть границу |
Современная альтернатива на CSS:
<style>
.no-border-iframe {
border: none;
}
.custom-border-iframe {
border: 2px dashed #3498db;
border-radius: 8px;
}
</style>
<iframe
src="widget.html"
class="no-border-iframe"
width="300"
height="200">
</iframe>
<iframe
src="content.html"
class="custom-border-iframe"
width="300"
height="200">
</iframe>
Рекомендации по замене устаревшего атрибута:
- Используйте
border: none;вместоframeborder="0" - Для кастомных границ применяйте CSS-свойства border
- Добавляйте
:focusстили для доступности - Сочетайте с
outlineдля интерактивных фреймов
Пример с различными стилями границ:
<style>
.iframe-border-examples iframe {
margin: 10px;
width: 250px;
height: 150px;
}
.iframe-1 { border: 1px solid #ccc; }
.iframe-2 { border: 3px double #3498db; }
.iframe-3 {
border: none;
box-shadow: 0 0 0 2px #e74c3c;
}
</style>
<div class="iframe-border-examples">
<iframe src="content1.html" class="iframe-1"></iframe>
<iframe src="content2.html" class="iframe-2"></iframe>
<iframe src="content3.html" class="iframe-3"></iframe>
</div>
Ограничения и совместимость:
- Атрибут frameborder работает в старых браузерах, но не валиден в HTML5
- CSS-аналоги поддерживаются всеми современными браузерами
- Некоторые старые CMS могут автоматически добавлять frameborder
- В отличие от CSS, frameborder не позволяет кастомизировать вид границы
Примечание: Для полного контроля над внешним видом iframe всегда используйте CSS. Современные методы позволяют создавать адаптивные границы, анимации и различные состояния (hover, focus) для iframe элементов.