Что такое border как поставить бордюр примеры
Что такое "бордюр"? Border – это свойство элемента, которое часто используется и применяется на страницах сайта! Будем разбирать, как поставить border, ширину border , border слева, справа, внизу, сверху! Закруглим border. В общем будем делать с border все, что мы нашли в поисковых запросах о border! Чтобы видеть, к какому div применяли border, мы покрасим в цвет "background-color: #edc2e6;".
Подробно о бордюре/border css в html/
- Что такое border css
- Бордюр снизу - border bottom css
- Бордюр слева - css border left
- Бордюр справа - css border right
- Бордюр сверху - css border top
- Цвет бордюра - border color css
- Радиус бордюра border radius css
- свойства border градиент border
- Тень для бордюра css
- Внутренний доступ бордюра cs
- Отступы снаружи бордюра border margin css
- css table border
Что такое border css
Начнем с того : "Что такое border css".
"BORDER" - может быть свойством.
Но и "BORDER" - может быть атрибутом атрибут border(устаревшее).
Синтаксис применения свойства border
Свойство border может устанавливаться тремя способами:
Через атрибут attribute style, например :
<div style="border: 1px solid red">текст</div>
Результат:
текст
Через тег style, например:
<style>.name_of_class{border: 1px solid blue}</style>
<div class="name_of_class">текст</div>
Результат:
текст
Через файл file css, например : Аналогичный способ, что и во втором пункте, только класс размещается в файле css.
Перечисленные способы создания бордюра элемента, применяются в зависимости от необходимых задач, это :
Локально в одном элементе.
Локально на одной странице, для повторяющихся элементов.
И на всем сайте.
Бордюр снизу - border bottom css
Поставим Бордюр снизу это у нас свойство - border bottom, чтобы увидеть его мы поставим толщину бордюраСтили для border bottom css:
<div class="border_1">Здесь текст в div "border-bottom: 2px solid"</div>
.border_1{
border-bottom: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра снизу .
Бордюр слева - css border left
Далее сделаем Бордюр слева - это свойство бордюра border left
Стили для border left css:
<div class="border_2">Здесь текст в div "border-left: 2px solid"</div>
.border_2{
border-left: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра слева.
Бордюр справа - css border right
Следующий бордюр на очереди это Бордюр справа - это свойство border right
Стили для border right css:
<div class="border_3">Здесь текст в div "border-right: 2px solid"</div>
.border_2{
border-right: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра справа .
Бордюр сверху - css border top
Не знаю зачем, но есть еще и Бордюр сверху - если он существует, то значит -это кому то нужно!
Стили для border top css:
<div class="border_4">Здесь текст в div "border-top: 2px solid"</div>
.border_4{
border-top: 2px solid;
background-color: #edc2e6;
}
Расположение бордюра сверху:
Цвет бордюра - border color css
Сделаем наш border цветом, ну например красным и пусть он будет снизу!
Цвет для border можно задать прямо в свойствах Стили для border-bottom + color css : <div class="border_5">Здесь текст в div border-bottom: 2px solid red; </div> .border_5{ border-bottom: 2px solid background-color: #edc2e6; } Результат: Либо же Стили для border-color css + bottom : <div class="border_6">Здесь текст в div border-bottom: 2px solid; border-color : green; </div> .border_6{ border-bottom: 2px solid; border-color : green; background-color: #edc2e6; } Результат: Если требуется закруглить углы, то делаем "border-radius" к примеру в 15px "border-radius: 15px;" Кстати, тут мы как-то делали о кругах и там как раз мы использовали это свойство. Стили для border radius <div class="border_7">Здесь будет текст с переносом... </div> .border_7{ background-color: #edc2e6; border-radius: 15px;" } Результат применения радиуса к див: с переносом... Мы уже рассматривали свойства линии, которые также можно применить и к border, что собственно мы делали выше! Данное свойство было Добавим тень нашему бордюру, это приведет к эффекту парения элемента. Вообще то... border shadow не бывает.... бывает box-shadow: <style> .border_8{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ } </style> <div class="border_8"> текст </div> Обращаю ваше внимание, что текст прилипает к бордюру элемента, и снаружи и внутри! Поэтому следующим пунктом добавим отступ для бордюра Здесь текст и свойства: .border_8{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ } Нам нужно, чтобы текст немного отступал от бордюра. Возьмем свойства из выше идущего пункта и добавим ему свойство padding - это будет внутренний доступ бордюра. <style> .border_9{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding : 40px; } </style> <div class="border_9">Текст</div> Но опять же, наш текст снаружи все равно прилипает к бордюру! В следующем пункте изменим и это! Здесь текст и свойства: .border_9{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding : 40px; } Опять возьмем выше идущий весь код и добавим в него свойство margin. Это будет наружный отступ от бордюра элемента : <style> .border_10{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding : 40px; margin: 40px; } </style> <div class="border_10">текст</div> .border_10{ background: #fc0; /* Цвет фона */ box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */ padding : 40px; margin: 40px; }
Радиус бордюра border radius css
Свойства border градиент border
Тень для бордюра css
Внутренний доступ бордюра css
Отступы снаружи бордюра border margin css
О css table border
О css table border -мы говорили здесь и о цвете
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
