边框颜色的CSS复选框样式

我的桌子上有一个复选框.这是该复选框的CSS

input[type="checkbox"] {
    width: 20px;
    height: 30px;
    margin: auto;
    display: table-row;
    border: 5px solid red;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 4px;
    margin-top: 1px;
}

但它显示正常的复选框.我想更改该复选框的边框颜色.但它不起作用!

您只能在css下方放置复选框边框并查看小提琴演示

CSS:

.error input[type=checkbox] {
  outline: 2px solid #c00;
}