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 download Jquery if link only shows source code and connect it to my html

    How Do I Make a “Trickless”, Cross-Platform CSS-Based Same Column Height?

    How do I draw a Diagonal div?

    How to change background color of elements every 5s using jquery? [duplicate]

    How to horizontally repeat two different bg gradients to the entire page width?

    How to flatten checkbox using CSS? [duplicate]

    How to return WebElement having particular CSS property using JavascriptExecutor?

    How do I translate an image based on its height?

    How do you get a css box to extend the entire width of the browser window?

    How to change HTML markup structure using javascript or CSS?

    How can i dynamically change title of input type file?

    how to style a horizontal submenu with nested

      How to set background color with opacity by css?

      I have a div with a pseudo :after element creating a circle after it. How can I add something else inside that circle?

      How to import css from libraries via postCSS?

      How to align div horizontally in this case

      How to reference CSS children [duplicate]

      How to use list tag in single line

      How to create this CSS border

      how do I select in css so the items appears in hover state In entire page(mega menu)

      Using `.toggle()` rather than applying a class to show content

      How do I make a div with guide lines?

      How can you have your websites resolution change according to the users screen resolution?

      CSS Position Help (horizontal sidebar showing up when animate content over)

      How at least approximately imitate col-md-1.5?

      How to hide a whole a
      if table tag is is empty or null?

      CSS: How to make a div block *not* take space in its parent container

      How do I scroll to s specific location in an iframe?

      How to change the navbar position? CSS & HTML

      How to change the arrow color of ' select' in a form with CSS [duplicate]