how to accomplish this border effect in css?


Tags: html,css

Problem :

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

for many moons now i have been trying to find out how to make the following border effect around the elements in CSS, specifically the borders between each line item like "signature serveice". "facebook monitor" etc. can i acheive this look by spacing div row 1px appart from the one below it? or how would i best accomplish this? to me it seems like there is a 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;
    }


Solution :

Looks to me like they just have a lighter border at the top and a darker border at the bottom. Nothing fancy. Didn't match the colors exactly, but you get the 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 you 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>


    CSS Howto..

    How to inherit Image width and height to video tag

    HTML/CSS - How to set text (e.g. 'Quote of the Day') to change automatically on page load/reload?

    How to assign a css class to echo $output

    How to add 'important' to zIndex

    I want to make semi-identical manu like the one on this page - how? [closed]

    How to locate element on a map by xpath or css selector

    How to get div columns to be same height?

    Having 2 css code blocks in html files how to make only one work using JS?

    Tab menu in CSS - how to set an active tab

    How to create a ribbon shape in CSS

    How to Auto set the height of a div using the height of another div

    How to remove extra space under paragraph in HTML/CSS

    How can I fix my CSS/HTML that uses input:checked, to prevent radio button movement?

    How to add Navigation dropdown menu?

    How to write CSS to convert div elements into a 3 or 4 column table?

    How to place object in relation to window browser in css/html?

    How to center the Nav-Bar

    How can I adjust the Wordpress Twentyeleven theme so that the page width is 100% and centered?

    Box-shadow is not showing or z-index

    How to show ellipsis for long cell values in kendo ui grid?

    How to implement color through css from dark to light? [closed]

    How can i fit my webPage in browser when user makes browser window big?

    How to align a link icon after the text via CSS?

    Writing CSS rules to different browsers, how? [duplicate]

    How to make links look like tabs using html/css?

    How can I have columns like this in CSS? (image)

    How to make an overflow hidden only for box-shadow

    How to make full window canvas in GWT?

    How to make link color change based on location on page?

    How can i refer to all of my tags in CSS?