Removing Dashcode’s Unwanted List Underline

While using Dashcode to create a dashboard widget, I came across an annoying styling bug that’s not as easy as it could be to fix, although it’s still pretty easy. If you use a list part in your widget, you have the option of rounding the corners. This is what corners rounded with a 10 pixel radius look like:


You may notice that there’s now a horizontal line at the bottom of the list that should have been affected by the corner rounding, but was not. To fix this, open your CSS file and find the .listRowTemplate_template selector. It should look like this:

.listRowTemplate_template {
    position: relative;
    list-style-type: none;
    height: 24px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    border-color: rgb(224, 224, 224);

We’re going to fix this problem by changing the two properties in bold above. Ideally, we would be able to add a :last-child selector to remove the border from the last row, but WebKit doesn’t support :last-child, only :first-child. So we’re going to have to change the border to being at the top of each row instead of bottom.

In the above CSS, change border-top-width to 1px and change border-bottom-width to 0px. Next, add this below that group:

.listRowTemplate_template:first-child {
    border-top-width: 0px;

This tells the first row of the list to not show its top border, and now we’ll get a rounded corner list that looks correct: