Появляется странный border?

Question

[Justique]

Никак не могу понять откуда берётся этот оранжевый бордер


Структура

<div class="steps">
	<div id="step0" class="steps_ir active">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">20%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step1" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">40%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step2" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">60%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step3" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">80%</div>
				</div>
			</div>
		</div>
	</div>
	<div id="step4" class="steps_ir">
		<div class="block-button BlockYouNeed-desktop">
			<div class="wizard-nav-progress">
				<div class="progress">
					<div class="indicator">100%</div>
				</div>
			</div>
		</div>
	</div>
</div>

css

.steps_ir .progress{
	background: linear-gradient(to right, #de8b55 50%, #6e7275 50%);
	background-size: 200% 100%;
    background-position:right bottom;
    transition:all .7s ease;
	border:none;
	border-radius:0px;
	border-right: 2px #43474a solid;
}
.steps_ir.active .progress{
	background-position:left bottom;
	border-right: 2px #43474a solid;
}
.steps_ir .progress .indicator{
	font-size:15px;
	color:#aeaeaf;
	line-height: 20px;
	font-weight:300;
	height: auto;
	transition:all .7s ease;
}
.steps_ir.active .progress .indicator{
	font-weight:400;
	
	color:#fff;
}

Comments

[HamSter]

Приведите код на codepen или на jsbin

[Justique]

HamSter: codepen.io/Justique/pen/wWgQqj

[Lynn «Кофеман»]

А зачем у вас так странно сделан фон?

Очевидно проблема в ошибках округления.

[Justique]

Алексей Тен: для анимации перехода на следующий шаг

[Lynn «Кофеман»]

Justique: По моему проще анимировать ширину градиента от 0% до 100% И не будет таких проблем codepen.io/alexeyten/pen/MeJdbO?editors=0100

[Justique]

Алексей Тен: Спасибо! Напишите в ответах, отмечу решением.

Answer 1

[Lynn «Кофеман»]

Это не border, а ошибки округления.

По моему проще анимировать ширину градиента от 0% до 100% И не будет таких проблем https://codepen.io/alexeyten/pen/MeJdbO

Answer 2

[semki096]

а может это не бордер а нижний фон

Comments

[Justique]

может и он, если указывать ширину .progress в пикселях она пропадает, но мне же необходимо что бы всё было в процентах, не охота прописывать медиа запросы для маленьких разрешений