.tul-components-border-cut-left-top,
.tul-components-border-cut-left-top * {
  --tul-components-border-cut-width: 2pt;
  --tul-components-border-cut-color: #fff;
  --tul-components-border-cut-pading: 2pt;
}
.tul-components-border-cut-left-top {
  border-color: var(--tul-components-color-main);
  border-width: var(--tul-components-border-cut-width);
  border-style: solid;
  border-radius: 2pt;
  position: relative;
  padding: max(var(--tul-components-border-cut-width),var(--tul-components-border-cut-pading));
}

.tul-components-border-cut-left-top > .tul-components-border-cut-left,
.tul-components-border-cut-left-top > .tul-components-border-cut-top {  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--tul-components-border-cut-color);
  border-style: solid;
  border-width: 0;
  border-color: var(--tul-components-border-cut-color);
}
.tul-components-border-cut-left-top > .tul-components-border-cut-left {

  transform: translate( calc( 0px - var(--tul-components-border-cut-width) ) , calc( 0px - calc( var(--tul-components-border-cut-width) / 2) ));
  /*   top: calc( 0 - var(--tul-components-border-cut-width) ); */
  width: calc( var(--tul-components-border-cut-width) + calc( var(--tul-components-border-cut-width) / 2 ) );
  height: 50%;
}
.tul-components-border-cut-left-top > .tul-components-border-cut-top {
  transform: translate(  calc( 0px - calc( var(--tul-components-border-cut-width) / 2) ),calc( 0px - var(--tul-components-border-cut-width) ) );
  /*   top: calc( 0 - var(--tul-components-border-cut-width) ); */
  height: calc( var(--tul-components-border-cut-width) + calc( var(--tul-components-border-cut-width) / 2 ) );
  width: 50%;
}