Как сделать единую границу у нескольких блоков с border-radius

#html #css #border

Пытаюсь сделать единую границу у нескольких соседних блоков в виде змейки. Если бы
углы были прямые, то всё было бы просто. Но углы должны быть скруглённые. Пробую делать так:



div {
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  border-top: none;
}

div:nth-of-type(1) {
  border-right: none;
  border-radius: 0 0 0 15px;
}

div:nth-of-type(2) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}

div:nth-of-type(3) {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

div:nth-of-type(4) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 10px;
}








Но не некоторых углах стыки явно видны :( Можно ли как-то исправить это? Или, может
быть, есть вообще другое решение для подобной задачи?
    

Ответы

Ответ 1

UPD: overflow:hidden; идёт на помощь

Как выяснилось, непрозрачный фон не подходит по условиям задачи. Тогда завернём каждый
блок в ещё один и дадим обёрткам свойство overflow:hidden;. Отрицательный верхний маржин
уведёт верхнюю границу за пределы обёртки, и обёртка её спрячет. 



.snake-border > div {
  overflow: hidden;
}

.snake-border > div > div {          /* 6. */
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  margin-top: -2px;                  /* 2. */
}

.snake-border > div:nth-of-type(1) > div {
  border-right: none;
  border-top: none;                  /* 1. */
  border-radius: 0 0 0 15px;
}

.snake-border > div:nth-of-type(2n+2) > div {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 15px;                 /* 4. */
}

.snake-border > div:nth-of-type(2n+3) > div {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

.snake-border > div:last-of-type > div {  /* 5. */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

  

  

  

  

  

  




 

Белый фон делает чёрное дело


Верхнюю границу спрячем только у первого блока. У остальных этого делать не надо,
иначе пропадёт часть скругления на углу блока.
Приподнимем блоки на ширину границы, чтобы в каждой паре блоков верхняя граница нижнего
соседа накладывалась на нижнюю границу верхнего.
А чтобы одну из наложившихся границ всё-таки не было видно, назначим блокам непрозрачный
фон. (По умолчанию background-clip имеет значение border-box, и фон заползает под границы.)
Можно поиграть левым отступом, чтобы пунктир удачнее обрывался на переходах между
блоками.
Можно сделать, чтобы у последнего блока граница уходила вниз вертикально, — так же,
как начинается у первого.
И поместим всё внутрь блока с классом, а то даже сниппет добавляет к вёрстке служебные
блоки.




.snake-border > div {                /* 6. */
  width: 190px;
  height: 200px;
  border: 2px dashed gray;
  margin-top: -2px;                  /* 2. */
  background: white;                 /* 3. */
}

.snake-border > div:nth-of-type(1) {
  border-right: none;
  border-top: none;                  /* 1. */
  border-radius: 0 0 0 15px;
}

.snake-border > div:nth-of-type(2n+2) {
  border-left: none;
  border-radius: 0 15px 15px 0;
  margin-left: 15px;                 /* 4. */
}

.snake-border > div:nth-of-type(2n+3) {
  border-right: none;
  border-radius: 15px 0 0 15px;
}

.snake-border > div:last-of-type {   /* 5. */
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}