/*Рамка из желтых кружечков*/
dias-1 {
  display: block;
  width: 600px;
  height: 200px;
  border: 10px dotted yellow;
}
/*Прерывистая зеленая рамка*/
dias-2 {
  display: block;
  width: 600px;
  height: 200px;
  border: 10px dashed green;
}
/*Обычная зеленая рамка*/
dias-3 {
  display: block;
  width: 600px;
  height: 200px;
  border: 5px solid green;
}

/*double — двойная рамка.*/
dias-4 {
  display: block;
  width: 600px;
  height: 200px;
  border: 10px double black;
}
/*groove — объёмная рифлёная вдавленная рамка.*/
dias-5 {
  display: block;
  width: 600px;
  height: 200px;
  border: 10px groove pink;
}
/*ridge — объёмная рифлёная выпуклая рамка.*/
dias-6 {
display: block;
width: 600px;
height: 200px;
border: 10px ridge lightblue;
}

/*inset — объёмная вдавленная рамка.*/
dias-7 {
  display: block;
  width: 600px;
  height: 200px;
  border: 10px inset lightblue;
}
/*Для создания рамок с закруглёнными углами используют свойство border-radius.*/
dias-8 {
  display: block;
  width: 600px;
  height: 200px;
  border: 3px solid green;
  border-radius: 30px; 
}
/*Про100я желтая.*/
dias-9 {
  display: block;
  width: 600px;
  height: 200px;
  text-indent: 30px;
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px auto;
}

/*Созданиетенейили выделений.*/
dias-10 {
  display: block;
  width: 600px;
  height: 200px;
  border: 1px solid black;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
/*Разделение разных частей элемента. */
dias-11 {
  display: block;
  width: 600px;
  height: 200px;
  border-top: 2px solid black;
  border-bottom: 1px dashed gray;
}
/*Если нужно задать отдельные значения для каждой стороны границы,
рекомендуется использовать отдельные свойства
border-top, border-right, border-bottom и border-left.*/
dias-12 {
  display: block;
  width: 600px;
  height: 200px;
  border-top: 3px solid black;
  border-right: 4px dotted blue;
  border-bottom: 4px dashed green;
  border-left: 4px double red;
}
/*тип линии.*/
dias-13 {
  display: block;
  width: 600px;
  height: 200px;
  border: 3px solid green;
  border-radius: 30px; 
}
/*Рамка разные зеленые 14*/
    .container {
      margin: 15px auto;
      display: flex;
      justify-content: space-between;
      width: 445px;
      flex-wrap: wrap;
    }

    .container>dias-14 {
      width: 100px;
      height: 100px;
      border-color: #4caf50;
      border-width: thick;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }

    .solid {
      border-style: solid;
    }

    .dotted {
      border-style: dotted;
    }

    .dashed {
      border-style: dashed;
    }

    .double {
      border-style: double;
    }

    .groove {
      border-style: groove;
    }

    .ridge {
      border-style: ridge;
    }

    .inset {
      border-style: inset;
    }

    .outset {
      border-style: outset;
    }
/*==================================Отдельный элемент14=======================================*/
.container {
      margin: 15px auto;
      justify-content: space-between;
      width: 445px;
      flex-wrap: wrap;
    }

    .container>dias-144 {
      height: 460px;
      border-color: #4caf50;
      border-width: thick;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }
    .dotted {
      border-style: dotted;
    }

/*Текст - 15*/
  .dias-15 {
    display: block;
    width: 600px;
    height: 200px;
    border: 4px double black; /* Параметры границы */
    background: #fc3; /* Цвет фона */
    padding: 10px; /* Поля вокруг текста */
   }

/* Это позволяет создавать интересной формы блоки - 16*/
   dias-16 {
        display: block;
    width: 600px;
    height: 200px;
    background: #0069b5; /* Цвет фона */
    color: #fff; /* Белый цвет текста */
    padding: 10px; /* Поля вокруг текста */
    border: 5px dashed #0069b5; /* Параметры рамки */ 
    background-clip: padding-box; /* Фон внутри рамки */
   }
/*Текст-17*/
.dias-17 {
  padding: 1rem;
  width: 600px;
  height: 200px;
  box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),
    0 5px 15px 0 rgba(0,0,0,0.08);
  background-color: #ffffff;
  border-radius: 0.5rem;
  
  border-left: 0 solid #00ff99;
  transition: border-left 300ms ease-in-out, padding-left 300ms ease-in-out;
}

.dias-17:hover {
  padding-left: 0.5rem;
  border-left: 0.5rem solid #00ff99;
}

.dias-17 > :first-child {
  margin-top: 0;
}

.dias-17 > :last-child {
  margin-bottom: 0;
}

.heading {
  color: #fff;
}

/*Текст- 18*/
#dias-18 {
  position: relative;
  width: 600px;
  height: 200px;
  background: white;
  border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
  color: white;
  box-shadow: 20px 20px rgba(0,0,0,.15);
  transition: all .4s ease;
}
#dias-18:hover {
  border-radius: 0% 0% 50% 50% / 0% 0% 5% 5% ;
  box-shadow: 10px 10px rgba(0,0,0,.25);
}

/*Границы контура обрезки градиента CSS - 19*/
.dias-19 {
    display: flex;
    flex-shrink: 0;
    height: calc(150px + 4vw);
    width: calc(150px + 4vw);
    margin: 25px;
    background-image: linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
}

.dias-19a {  
    height: calc(130px + 4vw);
    width: calc(130px + 4vw);
    background: url(https://саид.рус/images/said08111983.jpg;) no-repeat center;
    background-size: cover;
    margin: auto;
}

.dias-01 {
    -webkit-clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
        clip-path: polygon(50% 0%, 100% 40%, 82% 100%, 18% 100%, 0% 40%);
}

.dias-02 {
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
        clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.dias-03 {
    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
        clip-path: polygon(50% 0%, 90% 20%, 100% 62%, 75% 100%, 25% 100%, 0% 62%, 10% 20%);
}

.dias-04 {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
        clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.dias-05 {
    -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
        clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
}

.dias-06 {
    -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
        clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
}

.dias-07 {
    -webkit-clip-path: circle(50% at 50% 50%);
        clip-path: circle(50% at 50% 50%);
}

.dias-08 {
    -webkit-clip-path: ellipse(35% 50% at 50% 50%);
        clip-path: ellipse(35% 50% at 50% 50%);
}

.dias-09 {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.dias-010 {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.dias-011 {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.dias-012 {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.dias-013 {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

.dias-014 {
    -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
        clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

.dias-015 {
    -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
        clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 0% 50%);
}

.dias-016 {
    -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.dias-017 {
    -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
        clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.dias-018 {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
        clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
/*Текст*/
/*Текст*/