Властивість border-style визначає стиль рамки навколо елемента. Стиль можна встановлювати для всіх чотирьох сторін рамки різний.
Приклади:
td {border-style: solid;}
td {border-style: solid dotted;}
td {border-style: solid dotted dashed;}
td {border-style: solid dotted dashed double;}
На малюнку приклади різних значень border-style та різні їх комбінації:
Можливі значення:
solid — звичайна суцільна рамка;
none — рамка відсутня, її ширина рівна нулю;
hidden — результат той же, що й при none — рамка не відображається;
dotted — рамка в вигляді послідовності точок;
dashed — пунктирна рамка;
double — подвійна лінія;
groove — вдавлена рамка з ефектом об’єму;
ridge — випукла рамка з ефектом об’єму;
inset — інший варіант вдавленої рамки з ефектом об’єму;
outset — інший варіант випуклої рамки з ефектом об’єму;
inherit — запозичити значення в батьківського елемента.
Також можна вказувати два, три або чотири значення через прогалину. Якщо вказане одне значення, воно застосується до всієї рамки. Якщо два, то верхній та нижній рамці буде присвоєне перше, а лівій та правій — друге. Якщо три значення — верхній рамці буде присвоєне перше значення, лівій та правій — друге, а нижній — третє. Якщо ж вказати чотири значення, то вони будуть присвоєні по черзі верхній, правій, нижній та лівій рамці.
Об’єктна модель:
[window.]document.getElementById(“elementID”).style.borderStyle
Значення за замовчуванням: none.
Застосовується до елементів: до всіх елементів.
Наслідується: ні.