https://idea-hack.com/blog/79164/
CSSで作る43のおしゃれなボックス風テンプレート

CSSで作る43のおしゃれなボックス風テンプレート

綺麗なデザインはユーザーを心地よくさせ、サイトの滞在時間に良い影響をもたらします。 この記事では、ボックス風のテンプレートを紹介しています。

Pattern 1

Pattern 1-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-1">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-1 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  border: 3px solid #545454;
  padding: 10px 20px;
}
.box-pattern-1 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 1-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-2">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-2 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  border: 3px solid #545454;
  padding: 10px 20px;
  border-radius: 10px;
}
.box-pattern-2 .box-title {
  display: inline-block;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 2

Pattern 2-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-3">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-3 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
}
.box-pattern-3 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 2-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-4">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-4 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-radius: 10px;
}
.box-pattern-4 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 3

Pattern 3-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-5">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-5 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 4px double #545454;
}
.box-pattern-5 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 3-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-6">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-6 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 4px double #545454;
  border-radius: 10px;
}
.box-pattern-6 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 4

Pattern 4-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-7">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-7 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px dashed #545454;
}
.box-pattern-7 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 4-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-8">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-8 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px dashed #545454;
  border-radius: 10px;
}
.box-pattern-8 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 5

Pattern 5-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-9">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-9 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px dotted #545454;
}
.box-pattern-9 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 5-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-10">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-10 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px dotted #545454;
  border-radius: 10px;
}
.box-pattern-10 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 6

Pattern 6-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-11">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-11 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-left: 7px solid #545454;
}
.box-pattern-11 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 6-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-12">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-12 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-left: 7px solid #545454;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
}
.box-pattern-12 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 7

Pattern 7-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-13">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-13 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-top: 7px solid #545454;
}
.box-pattern-13 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 7-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-14">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-14 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-top: 7px solid #545454;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box-pattern-14 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 8

Pattern 8-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-15">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-15 {
  background-color: #545454;
  font-size: 16px;
  color: #ffffff;
  padding: 10px 20px;
  box-shadow: 0px 0px 0px 10px #545454;
  border: dashed 2px #ffffff;
}
.box-pattern-15 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #545454;
  background-color: #ffffff;
  font-size: 14px;
}

Pattern 8-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-16">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-16 {
  background-color: #545454;
  font-size: 16px;
  color: #ffffff;
  padding: 10px 20px;
  box-shadow: 0px 0px 0px 10px #545454;
  border: dashed 2px #ffffff;
  border-radius: 10px;
}
.box-pattern-16 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #545454;
  background-color: #ffffff;
  font-size: 14px;
}

Pattern 9

Pattern 9-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-17">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-17 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-top: 7px solid #545454;
  border-bottom: 7px solid #545454;
}
.box-pattern-17 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 9-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-18">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-18 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-top: 7px solid #545454;
  border-bottom: 7px solid #545454;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box-pattern-18 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 10

Pattern 10-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-19">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-19 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-right: 7px solid #545454;
  border-left: 7px solid #545454;
}
.box-pattern-19 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 10-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-20">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-20 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-right: 7px solid #545454;
  border-left: 7px solid #545454;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box-pattern-20 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 11

Pattern 11-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-21">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-21 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
  background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 7px);
}
.box-pattern-21 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 11-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-22">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-22 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 7px);
}
.box-pattern-22 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 12

Pattern 12-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-23">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-23 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 7px);
}
.box-pattern-23 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 12-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-24">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-24 {
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px, #ffffff 3px, #ffffff 7px);
}
.box-pattern-24 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 13

Pattern 13-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-25">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-25 {
  position: relative;
  font-size: 16px;
  color: #545454;
  padding: 10px 30px;
  border-top: 3px solid #545454;
  border-bottom: 3px solid #545454;
}
.box-pattern-25 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-25:before {
  content: '';
  position: absolute;
  top: -10px;
  width: 3px;
  height: calc(100% + 20px);
  background-color: #545454;
  left: 10px;
}
.box-pattern-25:after {
  content: '';
  position: absolute;
  top: -10px;
  width: 3px;
  height: calc(100% + 20px);
  background-color: #545454;
  right: 10px;
}

Pattern 14

Pattern 14-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-27">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-27 {
  position: relative;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
}
.box-pattern-27 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-27:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 3px solid #545454;
  border-radius: 50%;
  bottom: -12px;
  right: -12px;
}
.box-pattern-27:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 3px solid #545454;
  border-radius: 50%;
  top: -12px;
  left: -12px;
}

Pattern 14-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-28">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-28 {
  position: relative;
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
}
.box-pattern-28 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-28:before {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 3px solid #545454;
  border-radius: 50%;
  bottom: -12px;
  right: -12px;
  background-color: #f5f5f5;
}
.box-pattern-28:after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  border: 3px solid #545454;
  border-radius: 50%;
  top: -12px;
  left: -12px;
  background-color: #f5f5f5;
}

Pattern 15

Pattern 15-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-29">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-29 {
  position: relative;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
}
.box-pattern-29 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-29:before {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  border-left: 3px solid #545454;
  border-top: 3px solid #545454;
  top: 0;
  left: 0;
}
.box-pattern-29:after {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  border-right: 3px solid #545454;
  border-bottom: 3px solid #545454;
  bottom: 0;
  right: 0;
}

Pattern 15-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-30">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-30 {
  background-color: #f5f5f5;
  position: relative;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
}
.box-pattern-30 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-30:before {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  border-left: 3px solid #545454;
  border-top: 3px solid #545454;
  top: 0;
  left: 0;
}
.box-pattern-30:after {
  content: '';
  width: 20px;
  height: 30px;
  position: absolute;
  display: inline-block;
  border-right: 3px solid #545454;
  border-bottom: 3px solid #545454;
  bottom: 0;
  right: 0;
}

Pattern 16

Pattern 16-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-31">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-31 {
  position: relative;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
}
.box-pattern-31 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-31:before {
  position: absolute;
  top: 0;
  content: '';
  width: 10px;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
  border-left: 2px dotted #545454;
  border-top: 2px dotted #545454;
  border-bottom: 2px dotted #545454;
  left: 0;
}
.box-pattern-31:after {
  position: absolute;
  top: 0;
  content: '';
  width: 10px;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
  border-top: 2px dotted #545454;
  border-right: 2px dotted #545454;
  border-bottom: 2px dotted #545454;
  right: 0;

Pattern 16-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-32">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-32 {
  position: relative;
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
}
.box-pattern-32 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-32:before {
  position: absolute;
  top: 0;
  content: '';
  width: 10px;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
  border-left: 2px dotted #545454;
  border-top: 2px dotted #545454;
  border-bottom: 2px dotted #545454;
  left: 0;
}
.box-pattern-32:after {
  position: absolute;
  top: 0;
  content: '';
  width: 10px;
  height: 100%;
  display: inline-block;
  box-sizing: border-box;
  border-top: 2px dotted #545454;
  border-right: 2px dotted #545454;
  border-bottom: 2px dotted #545454;
  right: 0;
}

Pattern 17

Pattern 17-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-33">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-33 {
  position: relative;
  background-color: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border-radius: 10px;
  width: calc(100% - 40px);
  margin-left: auto;
}
.box-pattern-33 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-33:before {
  font-family: "Font Awesome 5 Free";
  content: "f111";
  position: absolute;
  font-size: 15px;
  left: -40px;
  bottom: 0;
  color: #545454;
}
.box-pattern-33:after {
  font-family: "Font Awesome 5 Free";
  content: "f111";
  position: absolute;
  font-size: 23px;
  left: -23px;
  bottom: 0;
  color: #545454;
}

Pattern 18

Pattern 18-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-35">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-35 {
  position: relative;
  background: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  margin: 5px;
  color: #454545;
}
.box-pattern-35 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-35:after {
  position: absolute;
  content: '';
  right: 0px;
  top: 0px;
  border-width: 0 25px 25px 0;
  border-style: solid;
  border-color: #545454 #fff #545454;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

Pattern 18-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-36">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-36 {
  position: relative;
  background: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  margin: 5px;
  box-shadow: 0px 0px 0px 5px #545454;
  color: #545454;
}
.box-pattern-36 .box-title {
  display: inline-block;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}
.box-pattern-36:after {
  position: absolute;
  content: '';
  right: -5px;
  top: -6px;
  border-width: 0 25px 25px 0;
  border-style: solid;
  border-color: #545454 #fff #545454;
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

Pattern 19

Pattern 19-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-37">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-37 {
  position: relative;
  background: #ffffff;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
}
.box-pattern-37 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 	1rem;
  background: #ffffff;
  color: #545454;
}

Pattern 19-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-38">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-38 {
  position: relative;
  background: #ffffff;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
  border-radius: 10px;
}
.box-pattern-38 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 	1rem;
  background: #ffffff;
  color: #545454;
}

Pattern 20

Pattern 20-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-39">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-39 {
  position: relative;
  background: #ffffff;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
  margin-top: 25px;
}
.box-pattern-39 .box-title {
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
  position: absolute;
  display: inline-block;
  top: -24px;
  left: -3px;
}

Pattern 20-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-40">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-40 {
  position: relative;
  background: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 10px 20px;
  border: 3px solid #545454;
  margin-top: 25px;
}
.box-pattern-40 .box-title {
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
  position: absolute;
  display: inline-block;
  top: -24px;
  left: -3px;
}

Pattern 21

Pattern 21-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-41">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-41 {
  position: relative;
  background: #ffffff;
  font-size: 16px;
  color: #545454;
  padding: 33px 20px 10px 20px;
  border: 3px solid #545454;
}
.box-pattern-41 .box-title {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 21-2

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-42">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-42 {
  position: relative;
  background: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 33px 20px 10px 20px;
  border: 3px solid #545454;
}
.box-pattern-42 .box-title {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}

Pattern 22

Pattern 22-1

Output
Tips

It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.

HTML
<div class="box-pattern-43">
        <div class="box-title">Tips</div>
        <p>It is a long established fact that a render will be distracted by the readable content of a page when looking at this layout.</p>
      </div>
CSS
.box-pattern-43 {
  position: relative;
  background: #f5f5f5;
  font-size: 16px;
  color: #545454;
  padding: 33px 20px 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box-pattern-43 .box-title {
  position: absolute;
  display: inline-block;
  top: 0px;
  left: 0px;
  margin-bottom: 5px;
  padding: 0 1rem;
  color: #ffffff;
  background-color: #545454;
  font-size: 14px;
}