Границы

border-width - ширина границы;
- thin - тонкая (1px);
- medium - средняя (3px);
- thick - толстая (5px);
- px, em, cm - значение в единицах измерения;
  - border-width: 2px 4px 6px 8px; - можно задавать индивидуально для каждой стороны (верх, право, низ, лево);
border-style - стиль линии границы;
- none - без границы;
- solid - сплошная линия;
- dashed - пунктирная линия;
- dotted - точечная линия;
- double - двойная линия;
- groove - рамка с эффектом выреза;
- ridge - рамка с эффектом выступа;
- inset - вдавленная рамка;
- outset - выпуклая рамка;
border-color - цвет границы;
- border-color: red green blue yellow; - можно задавать индивидуально для каждой стороны (верх, право, низ, лево);
border: 3px dashed blue; - совмещает 3 параметра (ширина, стиль линии, цвет);
- border-top: 2px solid red; - верхняя граница;
- border-right: 2px solid red; - правая;
- border-bottom: 2px solid red; - нижняя;
- border-left: 2px solid red; - левая;
border-radius - скругление углов;
- border-radius: 10px 20px 30px 40px; - можно задавать индивидуально для каждого угла (верх-лево, верх-право, низ-право, низ-лево);

Например. Изменим файл index.html:

html

<div class="border-box">Пример с рамкой</div>

Изменим файл styles.css:

css

.border-box {
    padding: 20px;
    margin: 10px;
    border-top: 2px solid red;
    border-right: 4px dotted green;
    border-bottom: 3px double black;
    border-left: 5px groove orange;
    border-radius: 12px;
}

Границы ​

Границы