Добавление границы вокруг элемента. Border

Иногда необходимо добавить какому-либо элементу в html границу, т.е. линию вокруг элемента. Для этого создано свойство border, ему можно присвоить необходимый цвет, толщину и стиль. Например, самый часто используемый вариант границы:
Кнопка
1
2
3
4
5
6
7
8
9
<style>
div.my_button{
    background:#eee;
    border:1px solid #333;
    display:inline-block;
    padding: 10px 25px;
}
</style>
<div class='my_button'>Кнопка</div>
Возможно выделение кнопки, с помощью границы:
Наведи на меня
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style>
div.my_button_with_hover{
    padding: 10px 25px;
    background:#eee;
    border: 2px solid #333;
    display:inline-block;
    width: 200px;
    text-align: center;
    margin-top: 15px;
}
div.my_button_with_hover:hover{
    border-color: #ccc;
}
</style>
<div class='my_button_with_hover'>Наведи на меня</div>
В этих примерах граница имеет цвет #333, ширину линии равную 1px, стиль начертания solid (т.е. сплошная) Стили начертания : Стили начертания бывают 8-ми видов. Все они представлены ниже.
border: hidden 2px black
border: dotted 2px black
border: dashed 2px black
border: double 4px black
border: ridge 2px black
border: inset 2px black
border: outset 2px black
border: solid 2px black
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru