Убрать небольшую рамку при применении переполнения скрытого

Question

У меня есть следующая страница (увеличенная):

что является результатом следующего html:

<div class="background-dark-brown p-2 light-brown">
    <div class="position-relative overflow-hidden">
        <div class="position-absolute overflow-hidden top-0 left-0 w-100 h-100 border-brown background-dark-brown"></div>
        <div class="position-absolute corner top right border-brown background-dark-brown"></div>
    </div>
</div>

Это самое близкое, что я мог бы придумать для фигуры, которую я хочу построить, которая представляет собой «перевернутый» радиус границы с границей по периметру, если это имеет смысл. Как вы можете видеть, первый абсолютный div создает фактическую тонкую границу, которая появляется на рисунке, даже если я установил переполнение скрытым, а следующий элемент рендерится после. Я также пытался установить z-index +9999 для второго div, но это не имело никакого значения. Что я заметил, так это то, что если я изменю размеры ящика, он каким-то образом исчезнет, ​​но все это превратится в беспорядок.

У меня вопрос: могу ли я добавить какой-нибудь CSS, чтобы эта строка исчезла?

Дополнительный CSS, который у меня есть (я использую в основном загрузчик):

.corner {
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.top { 
    top: -15px;
}

.bottom { 
    bottom: -15px;
}

.left { 
    left: -15px; 
}

.right { 
    right: -15px 
}; 

UPDATE

Здесь добавлена ​​скрипка: https://jsfiddle.net/carlostorrecillas/q7mrtjpw/2/

Поскольку я использую Angular, мне интересно, может ли быть что-то странное с любым из пакетов, которые я использую:

"@angular/animations": "7.2.13",
    "@angular/common": "7.2.13",
    "@angular/compiler": "7.2.13",
    "@angular/core": "7.2.13",
    "@angular/forms": "7.2.13",
    "@angular/http": "7.2.13",
    "@angular/platform-browser": "7.2.13",
    "@angular/platform-browser-dynamic": "7.2.13",
    "@angular/platform-server": "7.2.13",
    "@angular/router": "7.2.13",
    "@fortawesome/angular-fontawesome": "0.3.0",
    "@fortawesome/fontawesome-svg-core": "1.2.16",
    "@fortawesome/free-brands-svg-icons": "5.8.0",
    "@fortawesome/free-solid-svg-icons": "5.8.0",
    "@nguniversal/common": "7.1.1",
    "@nguniversal/express-engine": "7.1.1",
    "@nguniversal/module-map-ngfactory-loader": "7.1.1",
    "@nicky-lenaers/ngx-scroll-to": "2.0.0",
    "bootstrap": "4.2.1",
    "core-js": "2.6.5",
    "luxon": "1.13.0",
    "ngx-cookie": "4.1.2",
    "rxjs": "6.4.0",
    "web-animations-js": "2.3.1",
    "zone.js": "0.9.0"

UPDATE

Мне удалось воспроизвести проблему. Кажется, что когда код находится внутри абсолютного элемента, он отображает строки, которые я упоминал. Обновленная скрипка: https://jsfiddle.net/carlostorrecillas/x9se4bc2/1/

Answer 1

Это мой подход, и я уверен, что граница не будет видна, потому что она определенно скрыта под дочерним элементом, который визуализирует края.

По сути, я просто накладываю закругленные края поверх исходной границыparent, скрывая переполнение в overflow_hider

.padder{
 padding: 10px;
 width: 200px;
 background-color: brown;
}

.overflow_hider{
 overflow: hidden;
}

.parent{
 width: 200px;
 height: 200px;
 border: 5px solid gold;
 background-color: brown;
 box-sizing: border-box;
 position: relative;
}

.edge{
 width: 50px;
 height: 50px; 
 background-color: brown;
 border-radius: 50px; 
 border: 5px solid gold;
}

.edge_tl{
 position: absolute;
 top: -35px; /* 50px * 1/2 + 5px because of 5px border of parent + 5px from own boarder  */
 left: -35px; /* 50px * 1/2 + 5px because of 5px border of parent + 5px from own boarder  */

}

/* SAME GOES for the other edges */
.edge_tr{
 position: absolute;
 top: -35px;
 right: -35px;
}

.edge_bl{
 position: absolute;
 bottom: -35px;
 left: -35px;
}

.edge_br{
 position: absolute;
 bottom: -35px;
 right: -35px;
}

<div class="padder">
  <div class="overflow_hider">
    <div class="parent">
    <div class="edge edge_tl"></div>
    <div class="edge edge_tr"></div>
    <div class="edge edge_bl"></div>
    <div class="edge edge_br"></div>
    </div>
  </div>
</div>

Answer 2

Обновление .my-container так, чтобы он также соответствовал его границе, решает его для этого примера.

.my-container {
    height: 525px;
    width: 305px;
    background: #dea762;
    padding: 2px;
   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

}

Результат выглядит следующим образом:

Это создает маску вокруг оскорбительной части. Очевидно, это только решает это для этого примера. Вы можете рассмотреть другой макет, чтобы решить его в общем.

Две дополнительные строки:

   -webkit-transform: translateZ(0);
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);

Это замаскирует угловые цвета.