html - how to accomplish this border effect in css? -


fiddle:
https://jsfiddle.net/aronlilland/bsml1kx7/

for many moons have been trying find out how make following border effect around elements in css, borders between each line item "signature serveice". "facebook monitor" etc. can acheive spacing div row 1px appart 1 below it? or how best accomplish this? me seems there light color edge border around each shape, simple question, simple answer

thank you!

enter image description here

    .table {       background: #1e2129;       width: 375px;     }     .row1 {       width: 100%;       line-height: 100px;       background: #272a34;       margin-bottom: 1px;       text-align: center;       color: #fff;       font-family: helvetica;     }     .row2 {       width: 100%;       line-height: 100px;       background: #313641;       margin-bottom: 1px;       text-align: center;       color: #fff;       font-family: helvetica;     } 

looks me have lighter border @ top , darker border @ bottom. nothing fancy. didn't match colors exactly, idea:

article {    border-radius: 20px;    background-color: #44ccff;    color: white;  }    article header,  article section div {    background-color: #445;   }  article section div:nth-child(odd) {    background-color: #333344;  }  article section div {    border-top: 2px solid #556;    border-bottom: 2px solid #223;  }
<article>  <h2>starterpackage</h2>  <header>here can type...</header>  <section>    <div>item 1</div>    <div>item 2</div>    <div>item 3</div>    <div>item 4</div>    <div>item 5</div>  </section>  </article>


Comments

Popular posts from this blog

how to insert data php javascript mysql with multiple array session 2 -

multithreading - Exception in Application constructor -

windows - CertCreateCertificateContext returns CRYPT_E_ASN1_BADTAG / 8009310b -