HI All,

I am having a table with two columns using checkbox, but the first column checkbox need to be used for advanced bulk select widget. I couldn't achieve the same checkbox display as the other column. I have copied like all the related css and applied to the first checkbox's css class like below, but still having a very edgy corners inside the checkbox. Can anyone help?

.checkbox1 {
    -webkit-appearance: none;
    cursor: pointer;
    height: 24px;
    position: relative;
    transition-duration: 180ms;
    transition-timing-function: linear;
    transition-delay: 0s;
    transition-property: all;
    width: 24px;
    border: 0;
    padding:0;
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--border-radius-soft);
}

.checkbox1:before{
background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    content: '';
    display: block;
    height: 22px;
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 22px;
    border-radius: var(--border-radius-soft);
}

.checkbox1:before,
.TableRecords .TableRecords_Header [type="checkbox"]:before { 
    border-radius: var(--border-radius-soft); 
}

.checkbox1:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:hover:before {
    border: var(--border-size-s) solid var(--color-neutral-6);
    border-radius: var(--border-radius-soft);
}

.checkbox1:focus:before,
.radio-button:focus:before,
.TableRecords .TableRecords_Header [type="checkbox"]:focus:before {
    box-shadow: 0 0 0 2px #a3daff;
    border-radius: var(--border-radius-soft);
}

.checkbox1:checked:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
    border-radius: var(--border-radius-soft);
}

.checkbox1:checked:hover:before,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:hover:before {
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
            border-radius: var(--border-radius-soft);
}

.checkbox1[disabled="disabled"],
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"] {
    background-color: transparent;
    border: none;
    pointer-events: none;
}

.checkbox1[disabled="disabled"]:before,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.checkbox1:after,
.TableRecords .TableRecords_Header [type="checkbox"]:after {
    border: var(--border-size-l) solid var(--color-neutral-0);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
    content: '';
    display: block;
    height: 4px;
    left: 5px;
    opacity: 0;
    position: absolute;
    top: 7px;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transition: all 180ms linear;
            transition: all 180ms linear;
    width: 12px;
}

.checkbox1:checked:after,
.TableRecords .TableRecords_Header [type="checkbox"]:checked:after {
    opacity: 1;
}

.checkbox1[disabled="disabled"]:after,
.TableRecords .TableRecords_Header [type="checkbox"][disabled="disabled"]:after {
    border: var(--border-size-m) solid var(--color-neutral-4);
    border-right: var(--border-size-none);
    border-top: var(--border-size-none);
}

.checkbox1.Not_Valid:before,
.TableRecords .TableRecords_Header [type="checkbox"].Not_Valid:before {
    border: var(--border-size-m) solid var(--color-error);
    height: 20px;
    width: 20px;
}

What I found is that, both original checkbox css and checkbox1 css have the same border-radius setting but not sure why cant make it same.