<div class="info">
	<p>За допомогою властивості <code>border-top-style</code> ми можемо визначити стиль верхнього кордону елемента.</p>
</div>

<div class="wrapper">
    <div class="block"></div>
    <div class="block dashed">border-top-style: dashed;</div>
    <div class="block dotted">border-top-style: dotted;</div>
    <div class="block double">border-top-style: double;</div>
    <div class="block groove">border-top-style: groove;</div>
    <div class="block ridge">border-top-style: ridge;</div>
    <div class="block inset">border-top-style: inset;</div>
    <div class="block outset">border-top-style: outset;</div>  
    <div class="block none">border-top-style: none;</div>
</div>
* {
    box-sizing: border-box;
}

body {
    font-family: monospace;
    font-size: 17px;
    line-height: 1.45;
    text-align: center;
}

.info {
    padding: 4px 16px 8px 16px;
}

code {
    font-weight: 700;
    color: #444;
    border-bottom: 2px solid #666;
}

.wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.block {
    width: 150px;
    height: 150px;
    background-color: gold;
    border: 10px solid #444;
    margin-bottom: 20px;
}

.block.dashed {
    border-top-style: dashed;
}

.block.dotted {
    border-top-style: dotted;
}

.block.double {
    border-top-style: double;
}

.block.groove {
    border-top-style: groove;
}

.block.ridge {
    border-top-style: ridge;
}

.block.inset {
    border-top-style: inset;
}

.block.outset {
    border-top-style: outset;
}

.block.none {
    border-top-style: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.