How to model a property with two different formats and ranges

I am designing a JSON based data schema to describe the visual appearance of blocks similar to HTML elements.
It should feel familiar for somebody knowledgable in HTML/CSS but is more restrictive due to constraints of the enviroment that it will be used in.

Now I am unsure how to model “width”.
Acceptable are either pixel values between 0 and positive infinity or percent values between 0 and 100, but no points, ems, rems or whatever else.

I have three alternatives in mind:

1st: One property with varying formats

{
    "width": 300,
    "width": "300",
    "width": "300px",
    "width": "50%"
}

2nd: Two separate mutual exclusive properties

{
    "width": 300,
    "width-relative": 50
}

3rd: One property and a boolean flag

{
    "width": 50,
    "relative-width": true
}

They all have their pros and cons in terms of similarity to HTML/CSS, ease of validation, conciseness, consistency, …
I have a favorite, my colleague has a different one.

Wich one would you choose and why?