Create pixelated corners in unit-list

dabblet.css

ul li {
	list-style: none;
}
.unit-list {
        border:5px solid #ababab;
        background-color:#fff;
}

.unit-list li {
        position:relative;
        padding:10px 10px;
        border-bottom:2px solid #ababab;
        font-weight:bold;
}

/* Create pixelated corners in unit-list */
ul {
	display:inline-block;
	}
.unit-list > li:first-of-type {
        background-color:#fff;
        border-top:5px solid #ababab;
        margin-top:-4px;
        padding-top:6px;
}

.unit-list > li:last-of-type {
        margin-bottom:-4px;
        background-color:#fff;
        padding-bottom:8px;
}

.unit-list > li:first-of-type:before,
.unit-list > li:last-of-type:after {
        content:'';
        position:absolute;
        left:2px;
        right:2px;
        display:block;
        height:2px;
        background-color:#fff;
}

.unit-list > li:first-of-type:before {
        top:-4px;
        border-top:5px solid #ababab;
}

.unit-list > li:last-of-type:after {
        bottom:-4px;
        border-bottom:5px solid #ababab;
}

dabblet.html

<ul class="unit-list">
        <li>A list item</li>
        <li>This is something else</li>
        <li>Word</li>
</ul>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}