如何为JavaFX ComboBox下拉列表首尾单元格设置圆角？

针对你要给ComboBox下拉列表首末单元格设置圆角的需求，修正现有CSS的错误并调整样式逻辑即可实现，以下是完整解决方案：

修正后的CSS代码 #

.combobox .combo-box-popup {
    -fx-background-color: transparent; 
}

.combobox .combo-box-popup .list-view {
    -fx-background-insets: 0;
    -fx-padding: 0;
    -fx-effect: null;
    -fx-margin: 0;
    /* 移除ListView自身的背景与边框，避免遮挡单元格圆角 */
    -fx-background-color: transparent; 
    -fx-border-color: transparent;
    -fx-background-radius: 0;
    -fx-border-radius: 0;
    -fx-translate-y: -1px;
    -fx-min-height: 36px; 
}

.combobox .combo-box-popup .list-view .list-cell {
    -fx-margin: 0;
    -fx-border-color: transparent;
    -fx-border-width: 0;
    -fx-background-color: #fdfdff; 
    -fx-text-fill: #333e48; 
    -fx-font-size: 14px;
    -fx-cell-size: 36px;
}

/* 首单元格：设置上圆角，同时添加上、左、右边框保证整体连贯 */
.combobox .combo-box-popup .list-view .list-cell:first-of-type {
    -fx-background-color: #e3f0fd; 
    -fx-border-color: #3d96ef;
    -fx-border-width: 1px 1px 0 1px;
    -fx-border-radius: 8px 8px 0 0;
    -fx-background-radius: 8px 8px 0 0; 
}

/* 尾单元格：修正原错误的border-radius值，设置下圆角与下、左、右边框 */
.combobox .combo-box-popup .list-view .list-cell:last-of-type {
    -fx-background-color: #e3f0fd;
    -fx-border-color: #3d96ef;
    -fx-border-width: 0 1px 1px 1px;
    -fx-border-radius: 0 0 8px 8px;
    -fx-background-radius: 0 0 8px 8px; 
}

/* 中间单元格：添加左右边框，保持整体边框连贯 */
.combobox .combo-box-popup .list-view .list-cell:not(:first-of-type):not(:last-of-type):not(:empty) {
    -fx-border-color: #3d96ef;
    -fx-border-width: 0 1px 0 1px;
}

/* 空单元格处理：避免显示多余背景与边框 */
.combobox .combo-box-popup .list-view .list-cell:empty {
    -fx-background-color: transparent;
    -fx-border-color: transparent;
}

关键调整说明 #

1. 移除ListView自身样式干扰：原ListView设置的背景色和边框圆角会覆盖单元格的圆角效果，改为透明后让单元格的样式完全展示。
2. 修正尾单元格属性错误：你之前将尾单元格的-fx-border-radius错误设置为8px 8px 0 0，调整为0 0 8px 8px才能实现下圆角。
3. 连贯边框逻辑：通过给首、中、尾单元格分别设置对应边框，保证整个下拉列表的边框是完整连贯的，同时首末单元格保留圆角样式。
4. 空单元格优化：避免下拉列表中的空单元格显示不必要的背景和边框，提升视觉一致性。

内容的提问来源于stack exchange，提问作者TheXfox