Как сделать рамку со всех сторон?

Question

[Сергей К]

Как сделать рамку со всех сторон? После многих экспериментов так и не получается.
код html

<div class="portfolio__blocks">
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img smile"></div>
			<div class="portfolio__blocks--text">Проектов</div>
			<div class="portfolio__blocks--numbers">1000+</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img diacussion"></div>
			<div class="portfolio__blocks--text">Клиентов</div>
			<div class="portfolio__blocks--numbers">350</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img ok"></div>
			<div class="portfolio__blocks--text">Работаю с</div>
			<div class="portfolio__blocks--numbers">2015</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img smile"></div>
			<div class="portfolio__blocks--text">Проектов</div>
			<div class="portfolio__blocks--numbers">1000+</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img diacussion"></div>
			<div class="portfolio__blocks--text">Клиентов</div>
			<div class="portfolio__blocks--numbers">350</div>
		</div>
		<div class="portfolio__blocks-item">
			<div class="portfolio__blocks--img ok"></div>
			<div class="portfolio__blocks--text">Работаю с</div>
			<div class="portfolio__blocks--numbers">2015</div>
		</div>
	</div>

код css

//Блок с портфолио
.portfolio{
	background: #f0f0f0;

//Блоки с предварительной инфой
	&__blocks{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;

//Сами блоки 
		&-item{
			flex-direction: column;
			border: 1px solid gray;
			border-top: none;
			padding: 10px;

//Предварительные блоки обо мне
			&:nth-child(1n+1){
				border-right: none;
			}
			&:last-child{
				border-right: 1px solid gray;
			}
		}
		&--img{
			background: url(../img/spl-sprit.png) no-repeat;
			width: 72px;
			height: 64px;	
			margin: 40px 80px;			
		}
		&--text{
			text-align: center;
			color: #999999;
			font-size: 20px;
		}
		&--numbers{
			text-align: center;
			color: #00ccff;
			font-size: 40px;
			padding: 10px;
		}
	}
}

Ссылка на copden
https://codepen.io/sergej-korolew/pen/yweEqW

Comments

[WapSter]

у вас и так рамка со всех сторон дочерних элементов, что именно хочешь сделать?

[Сергей К]

Тимур Турсунбаев, Хочу чтобы рамки были со всех сторон и не было задвоения

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/YgqNZe

Comments

[Сергей К]

так задвоение рамки идет

[Андрей Федоров]

Сергей К, проверил в ff, chrom, opera, safari - нигде на 100% масштабе задвоения нет.

[Сергей К]

Андрей Федоров, увелить кол-во пикселей в бордере хотяб до 5

[Андрей Федоров]

Сергей К, ну если бездумно применять советы которые вам дают, то да задвоение есть... https://codepen.io/aliencash/pen/KEzqmP

[Сергей К]

Андрей Федоров, Спасиьо за ответ но тут это нужно единожды и чтобы из-за этого загромождать код переменными - лишнее, проще нельзя сделать разве? Когда я оставляю только три блока то все ок. Чтото нарушается когда более

[Андрей Федоров]

Сергей К, вы же все равно less используете, так какая разница? Просто мне удобнее было на нативных переменных сделать. Важно чтобы в margin-left, margin-top, border-width и translate было одно и тоже значение (по модулю).

Answer 2

[Варлам Ерофеич]

Убрать лишние чилдры, а вот здесь вставить маржу:

&-item {
		flex-direction: column;
		border: 1px solid gray;
		box-sizing: border-box;
		padding: 10px;
    margin: -.5px; /* каждый margin будет съедать по пол-пикселя у соседнего блока */
   }

Результат:
Если же толщину border-а придётся менять чаще, то значение толщины вывести в переменную,
как подсказал Андрей Федоров и маржу высчитывать через calc() автоматически.
В моём случае маржа всего одна и равна она половине бордера...