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

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

Создание сайтов на Django

Создание сайтов на Django

Данный курс научит Вас создавать сайты на очень мощном фреймворке – Django. Курс состоит из 9 разделов, в которых Вы с нуля освоите данный фреймворк на примере создания полноценного Интернет-магазина.

В рамках многочисленных упражнений Вы так же создадите свой собственный сайт, что даст Вам ту необходимую практику для закрепления материала, а также полноценную серьёзную работу для своего портфолио.

Помимо самого курса Вас ждёт ещё и бесплатный ценный Бонус: «Unit-тестирование сайта на Django». В этом Бонусе Вы узнаете, как можно написать автоматические тесты для проекта на Django. Это позволит находить оперативно ошибки, а также даст возможность в будущем добавлять новый функционал, не боясь что-то сломать в старом.

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear.

Here is my HTML code:

How do I set a border for an HTML div tag?

8 Answers 8

Try being explicit about all the border properties. For example:

See Border shorthand property. Although the other bits are optional some browsers don’t set the width or colour to a default you’d expect. In your case I’d bet that it’s the width that’s zero unless specified.

or as shorthand

Since the initial value of the border styles is ‘none’, no borders will be visible unless the border style is set.

Что такое border как поставить бордюр примеры

Но и "BORDER" — может быть атрибутом атрибут border(устаревшее).

Синтаксис применения свойства border

Через атрибут attribute style, например :

Результат:

Через тег style, например:

Результат:

Через файл file css, например : Аналогичный способ, что и во втором пункте, только класс размещается в файле css.

Перечисленные способы создания бордюра элемента, применяются в зависимости от необходимых задач, это :

Локально в одном элементе.

Локально на одной странице, для повторяющихся элементов.

И на всем сайте.

Бордюр снизу — border bottom css

Поставим Бордюр снизу это у нас свойство — border bottom, чтобы увидеть его мы поставим толщину бордюра 2px

Стили для border bottom css:

<div текст в div "border-bottom: 2px solid"</div>

border-bottom: 2px solid;

Расположение бордюра снизу .

Бордюр слева — css border left

Далее сделаем Бордюр слева — это свойство бордюра border left

Стили для border left css:

<div текст в div "border-left: 2px solid"</div>

border-left: 2px solid;

Расположение бордюра слева.

Бордюр справа — css border right

Следующий бордюр на очереди это Бордюр справа — это свойство border right

Стили для border right css:

<div текст в div "border-right: 2px solid"</div>

border-right: 2px solid;

Расположение бордюра справа .

Бордюр сверху — css border top

Не знаю зачем, но есть еще и Бордюр сверху — если он существует, то значит -это кому то нужно!

Стили для border top css:

<div текст в div "border-top: 2px solid"</div>

border-top: 2px solid;

Расположение бордюра сверху:

Цвет бордюра — border color css

Сделаем наш border цветом, ну например красным и пусть он будет снизу!

Цвет для border можно задать прямо в свойствах border выделено красным red red ;

Стили для border-color css + bottom :

<div текст в div border-bottom: 2px solid; border-color : green; </div>

border-bottom: 2px solid;

Радиус бордюра border radius css

Если требуется закруглить углы, то делаем "border-radius" к примеру в 15px "border-radius: 15px;"

Кстати, тут мы как-то делали о кругах и там как раз мы использовали это свойство.

Стили для border radius

<div будет текст

Результат применения радиуса к див:

свойства border градиент border

Мы уже рассматривали свойства линии, которые также можно применить и к border, что собственно мы делали выше!

Данное свойство было solid — все остальные свойства не хочу повторять, потому, что вот здесь мы все один раз разжевывали!

Тень для бордюра css

Добавим тень нашему бордюру, это приведет к эффекту парения элемента.

Вообще то. border shadow не бывает. бывает box-shadow:

background: #fc0; /* Цвет фона */

box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

Обращаю ваше внимание, что текст прилипает к бордюру элемента, и снаружи и внутри!

Поэтому следующим пунктом добавим отступ для бордюра

Здесь текст и свойства:

background: #fc0; /* Цвет фона */

box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

Внутренний доступ бордюра css

Нам нужно, чтобы текст немного отступал от бордюра.

Возьмем свойства из выше идущего пункта и добавим ему свойство padding — это будет внутренний доступ бордюра.

background: #fc0; /* Цвет фона */

box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */

Но опять же, наш текст снаружи все равно прилипает к бордюру! В следующем пункте изменим и это!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *