Cara Mudah Membuat Garis Tepi / Garis Besar Dengan Css Outline-Style

Baca Juga:

Apa itu garis tepi? Garis Tepi adalah garis yang terletak di bagian tepi pet dan ujung-ujung tiap garis akan bertemu dengan ujung garis yang berdekatan. Biasanya garis ini dibuat rangkap dua dan tebal.

Nah, sedangkan Outline adalah kerangka, regangan atau garis besar. Jadi outline merupakan rencana penulisan yang memuat garis besar dari suatu karangan yang akan digarap dan merupakan rangkaian ide-ide yang disusun secara sistematis.

Ini sama hal nya dengan tutorial yang akan saya bahas pada hari ini. Lalu bagaimana cara membuatnya? Ini sama seperti kita membuat sebuah border pada umumnya, bahkan hampir mirip.

Untuk cara dan langkah-langkah jelasnya, bisa Anda perhatikan dibawah.
Disini saya akan bagi menjadi beberapa bagian, agar bisa dimengerti dan terlihat mudah.

1. Outline Auto

#Css

.outline-auto {
 background-color: aliceblue;
   outline: 50px auto lavender;
     }

#Html

<div class="outline-box outline-auto"></div>
     <code>outline-style: auto</code>
           </div>

2. Outline Double

#Css

.outline-double {
 background-color: thistle;
   outline: 14px double white;
      outline-offset: -20px;
         }

#Html

<div class="outline-box outline-double"></div>
           <code>outline-style: double</code>
                       </div>

3. Outline Dotted-1

#Css

.outline-dotted-1 {
 background-color: mistyrose;
   outline: 24px dotted white;
      outline-offset: -12px;
         }

#Html

<div class="outline-box outline-dotted-1"></div>
                 <code>outline-style: dotted</code>
                                   </div>

4. Outline Dotted-2

#Css

.outline-dotted-2 {
 background-color: lightgoldenrodyellow;
   outline: 40px dotted white;
      outline-offset: -18px;
         }

#Html

<div class="outline-box outline-dotted-2"></div>
                       <code>outline-style: dotted</code>
                                               </div>

5. Outline Groove

#Css

.outline-groove {
 background-color: antiquewhite;
   outline: 14px groove burlywood;
      outline-offset: -15px;
         }

#Html

<div class="outline-box outline-groove"></div>
                             <code>outline-style: groove</code>
                                                           </div>

6. Outline Dashed

#Css

.outline-dashed {
 background-color: rosybrown;
   outline: 22px dashed white;
      outline-offset: -12px;
         }

#Html

<div class="outline-box outline-dashed"></div>
                                   <code>outline-style: dashed</code>
                                                                       </div>

7. Outline Ridge

#Css

.outline-ridge {
 background-color: azure;
   outline: 14px ridge lightblue;
      outline-offset: -14px;
         }

#Html

<div class="outline-box outline-ridge"></div>
                                         <code>outline-style: ridge</code>
                                                                                   </div>

8. Outline Outset

#Css

.outline-outset {
 background-color: floralwhite;
   outline: 24px outset pink;
      outline-offset: -24px;
         }

#Html

<div class="outline-box outline-outset"></div>
                                               <code>outline-style: outset</code>
                                                                                               </div>

9. Outline inset

#Css

.outline-inset {
 background-color: bisque;
   outline: 24px inset sandybrown;
      outline-offset: -24px;
         }

#Html

<div class="outline-box outline-inset"></div>
                                                     <code>outline-style: inset</code>
                                                                                                           </div>

Untuk kode keseluruhannya bisa dilihat berikut ini:
#Css

.outline-auto {
 background-color: aliceblue;
   outline: 50px auto lavender;
     }
     .outline-double {
      background-color: thistle;
        outline: 14px double white;
           outline-offset: -20px;
              }
              .outline-dotted-1 {
               background-color: mistyrose;
                 outline: 24px dotted white;
                    outline-offset: -12px;
                       }
                       .outline-dotted-2 {
                        background-color: lightgoldenrodyellow;
                          outline: 40px dotted white;
                             outline-offset: -18px;
                                }
                                .outline-groove {
                                 background-color: antiquewhite;
                                   outline: 14px groove burlywood;
                                      outline-offset: -15px;
                                         }
                                         .outline-dashed {
                                          background-color: rosybrown;
                                            outline: 22px dashed white;
                                               outline-offset: -12px;
                                                  }
                                                  .outline-ridge {
                                                   background-color: azure;
                                                     outline: 14px ridge lightblue;
                                                        outline-offset: -14px;
                                                           }
                                                           .outline-outset {
                                                            background-color: floralwhite;
                                                              outline: 24px outset pink;
                                                                 outline-offset: -24px;
                                                                    }
                                                                    .outline-inset {
                                                                     background-color: bisque;
                                                                       outline: 24px inset sandybrown;
                                                                          outline-offset: -24px;
                                                                             }
                                                                             /* presentation styles*/
                                                                             main {
                                                                              display: grid;
                                                                                height: 100%;
                                                                                   grid-template-rows: auto 1fr auto;
                                                                                       grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                                                                                            text-align: center;
                                                                                                 }
                                                                                                      .card {
                                                                                                            margin-bottom: 50px;
                                                                                                                  }
                                                                                                                        .outline-box {
                                                                                                                               margin: 40px auto;
                                                                                                                                       width: 180px;
                                                                                                                                                height: 180px;
                                                                                                                                                         }
                                                                                                                                                                  code {
                                                                                                                                                                            background-color: #dedede;
                                                                                                                                                                                       padding: 4px 6px;
                                                                                                                                                                                                   border-radius: 3px;
                                                                                                                                                                                                               }

#Html

<main>
 <div class="card">
   <div class="outline-box outline-auto"></div>
     <code>outline-style: auto</code>
      </div>
       <div class="card">
         <div class="outline-box outline-double"></div>
           <code>outline-style: double</code>
            </div>
             <div class="card">
               <div class="outline-box outline-dotted-1"></div>
                 <code>outline-style: dotted</code>
                  </div>
                   <div class="card">
                     <div class="outline-box outline-dotted-2"></div>
                       <code>outline-style: dotted</code>
                        </div>
                         <div class="card">
                           <div class="outline-box outline-groove"></div>
                             <code>outline-style: groove</code>
                              </div>
                               <div class="card">
                                 <div class="outline-box outline-dashed"></div>
                                   <code>outline-style: dashed</code>
                                    </div>
                                     <div class="card">
                                       <div class="outline-box outline-ridge"></div>
                                         <code>outline-style: ridge</code>
                                          </div>
                                           <div class="card">
                                             <div class="outline-box outline-outset"></div>
                                               <code>outline-style: outset</code>
                                                </div>
                                                 <div class="card">
                                                   <div class="outline-box outline-inset"></div>
                                                     <code>outline-style: inset</code>
                                                      </div>
                                                       </main>