Generated by SassMeister.com.

SassMeister-input-HTML.html

<h3>The grid</h3>

<ul class="rounded-grid">
  <li>
    <img src="http://lorempixel.com/400/400/fashion/1" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/2" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/3" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/4" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/5" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/6" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/7" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/8" />
  </li>
</ul>

SassMeister-input.scss

// ----
// libsass (v3.0.1)
// ----

/* # 

A thumbnail or block list, with rounded borders


*/
@mixin rounded-corner-grid($n-columns, $corner-radius: 1em) {
  
  $unit-width: 100% / $n-columns;

  li {
    float: left;
    width: $unit-width;
  }
  
  /* Target the first box in the first row */
  li:first-child {
    border-top-left-radius : $corner-radius;
  }
  
  /* Target the last box in the first row in the last column */
  li:nth-child(#{$n-columns}) {
    border-top-right-radius : $corner-radius ;
  }
  
  /* Target the first box in the last row */
  li:nth-child(#{$n-columns}n+1) {
    @for $i from 1 through $n-columns {
      &:nth-last-child(#{$i}) {
        border-bottom-left-radius: $corner-radius;
      }
    }
  } 
  
  /* Target the last box in the last row in the last column */
  li:nth-child(#{$n-columns}n+#{$n-columns}):last-child {
    border-bottom-right-radius: $corner-radius;
  }
  
}



ul.rounded-grid {
  @include rounded-corner-grid(4); /* Feel free to change parameters here */
  line-height: 10em;
  width: auto;
}

.rounded-grid li {
  box-sizing: border-box;
  border: 1px solid white;
  list-style: none;
  color: white;
  background: #268bd2;
  text-align: center;
  overflow:hidden;
  img {
    width:100%;
    height:auto;
    display:block;
  }
}

SassMeister-output.css

/* # 

A thumbnail or block list, with rounded borders


*/
ul.rounded-grid {
  /* Target the first box in the first row */
  /* Target the last box in the first row in the last column */
  /* Target the first box in the last row */
  /* Target the last box in the last row in the last column */
  /* Feel free to change parameters here */
  line-height: 10em;
  width: auto; }
  ul.rounded-grid li {
    float: left;
    width: 25%; }
  ul.rounded-grid li:first-child {
    border-top-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4) {
    border-top-right-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(1) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(2) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(3) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+1):nth-last-child(4) {
    border-bottom-left-radius: 1em; }
  ul.rounded-grid li:nth-child(4n+4):last-child {
    border-bottom-right-radius: 1em; }

.rounded-grid li {
  box-sizing: border-box;
  border: 1px solid white;
  list-style: none;
  color: white;
  background: #268bd2;
  text-align: center;
  overflow: hidden; }
  .rounded-grid li img {
    width: 100%;
    height: auto;
    display: block; }

SassMeister-rendered.html

<h3>The grid</h3>

<ul class="rounded-grid">
  <li>
    <img src="http://lorempixel.com/400/400/fashion/1" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/2" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/3" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/4" />
  </li>
  <li>
    <img src="http://lorempixel.com/400/400/fashion/5" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/6" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/7" />
  </li>
    <li>
    <img src="http://lorempixel.com/400/400/fashion/8" />
  </li>
</ul>