Gradient borders =)

Tutorials of (Gradient borders =)) by Roose

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Gradient borders =)</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body {
  margin: 20px;
  font-family: sans-serif;
}
.popup {
    padding: 5px;
    background-color: #fff;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0) 25%, rgba(75,190,150,1) 25%, rgba(75,190,150,1) 50%, rgba(232,72,72,1) 50%, rgba(232,72,72,1) 75%, rgba(88,212,255,0) 75%, rgba(88,212,255,0) 100%),
                      repeating-linear-gradient(90deg, rgba(255,210,20,1), rgba(255,210,20,1) 25%, rgba(75,190,150,1) 25%, rgba(75,190,150,1) 50%, rgba(232,72,72,1) 50%, rgba(232,72,72,1) 75%, rgba(88,212,255,1) 75%, rgba(88,212,255,1) 100%);

    border-radius: 10px;

    -webkit-box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    -moz-box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    max-width: min-content;
}
    .popup_in {
        background-color: #fff;
        padding: 22px 50px;
        border-radius: 10px;
        width: 300px;
        height: 250px;
    }
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="popup">

  <div class="popup_in">

    <h2 class="title">Вот такие окошки...</h2>

    <p>понимаешь...</p>

  </div>
  <!-- /.popup_in -->

</div>
<!-- /.popup -->
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body {
  margin: 20px;
  font-family: sans-serif;
}
.popup {
    padding: 5px;
    background-color: #fff;
    background-image: repeating-linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,0) 25%, rgba(75,190,150,1) 25%, rgba(75,190,150,1) 50%, rgba(232,72,72,1) 50%, rgba(232,72,72,1) 75%, rgba(88,212,255,0) 75%, rgba(88,212,255,0) 100%),
                      repeating-linear-gradient(90deg, rgba(255,210,20,1), rgba(255,210,20,1) 25%, rgba(75,190,150,1) 25%, rgba(75,190,150,1) 50%, rgba(232,72,72,1) 50%, rgba(232,72,72,1) 75%, rgba(88,212,255,1) 75%, rgba(88,212,255,1) 100%);

    border-radius: 10px;

    -webkit-box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    -moz-box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    box-shadow: 0 3px 32px rgba(0, 0, 0, .43);
    max-width: min-content;
}
    .popup_in {
        background-color: #fff;
        padding: 22px 50px;
        border-radius: 10px;
        width: 300px;
        height: 250px;
    }
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Gradient borders =) ) is write by roose, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © roose