How to pass parameters to css classes

Question

I want to know is it possible to add some flexibility to css via this:

where .round i

Answer 1

You can do what you are saying but you would have to reserve the keyword "round" for only this purpose. If you look at the following.

div[class*="round"] {
    background-color: green;
    color: white;
    padding: 10px;
}

And then targeting specific variants of it using...

div[class="round5"] {
    border-radius: 5px;
}

The first block of code selects all class names which contain the word round, this can be both a good thing and a bad thing.

Answer 2

You could do something similar but not exactly the way you've put it.

CSS

.radius{
    border-radius: 10px;
    border: 1px solid red;
}

.r5{
    border-radius:5px;
}

HTML

<div class="radius">Hello World</div>
<br/>
<div class="radius r5">Hello World</div>

Working Example

In the example above the red border will be retained but the border-radius will change.

Note that you don't start class names with numbers, hence r5 rather than 5