CSS :has() pseudo-selector

CSS:

li {
  list-style-type: none;
  padding: 10px;
  margin: 0 0 10px 0;
  border: 2px solid #777;
  border-radius: 5px;
}

input, label {
  cursor: pointer;
}

li input:checked {
  accent-color: red;
}

li:has(input:checked) {
  border-color: red;
}

HTML:

<ul>
  <li>
    <input type="radio" id="option1" name="options" checked>
    <label for="option1">Option 1</label>
  </li>
  <li>
    <input type="radio" id="option2" name="options">
    <label for="option2">Option 2</label>
  </li>
  <li>
    <input type="radio" id="option3" name="options">
    <label for="option3">Option 3</label>
  </li>
</ul>

<ul>
  <li>
    <input type="checkbox" id="checkbox1" checked>
    <label for="checkbox1">Checkbox 1</label>
  </li>
  <li>
    <input type="checkbox" id="checkbox2">
    <label for="checkbox2">Checkbox 2</label>
  </li>
</ul>