border-top на 50%

div { 
  --basesize: 300px; 
  width: var(--basesize); 
  border-top-width: calc(.5*var(--basesize)); 
  border-top-style: solid; 
  border-top-color: red; 
}

<div></div>

.main { 
        border: 3px solid #000; 
        height: 100px; 
        width: 300px; 
        position:relative; 
        padding: 10px 
}  
.spoiler { 
        position: absolute; 
        top:-3px; 
        left: -1px; 
        width:50%; 
        height: 3px; 
        background-color:red; 
}

<div class="main"> 
        <div class="spoiler"></div> 
        Нужно как-то указать размер border-top. Ширина блока 300px, border-top должен быть на 150px (50%) Как это сделать? 
</div>

.yourClass{ 
  width: 300px; 
  height: 100px; 
  background: #09f; 
  border-top: 150px solid #000; /* вот что тебе нужно */ 
}

<div class="yourClass"></div>

div { 
  width: 100px; 
  background: silver; 
  min-height: 180px; 
} 
 
div::before { 
  content: ""; 
  display: block; 
  padding-top: 50%; 
  background: blue; 
}

<div></div>