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

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

body {
	font-family: monospace;
	font-size: 20px;
	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: 140px;
	background-color: gold;
	border: 10px solid #444;
  margin-bottom: 20px;
}

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

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

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

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

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

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

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

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.