title: Is it possible to do regular expressions using wildcards in CSS to create less code?
body: <p>I want to use regular expressions to define a complex set of corner options with regard to the border radius</p>
  
  <p>I want a way to define the class corner* without the need to have each combination in the html or css</p>
  
  <p>example:</p>
  
  <p>this is my css as it is now:</p>
  
  <pre><code>.corner-tl {
      border-top-left-radius:8px;
  }
  
  .corner-tr {
      border-top-right-radius:8px;
  }
  
  .corner-bl {
      border-bottom-left-radius:8px;
  }
  
  .corner-br {
      border-bottom-right-radius:8px;
  }
  </code></pre>
  
  <p>however I want to be able to apply all, some or none of the above as shown below, a box with only top left and top right is done simply with the following code:</p>
  
  <pre><code> &lt;div class="corner-tl corner-tr"&gt;
  </code></pre>
  
  <p>These is the obvious solution - however I will be applying the same logic to many things like padding and margin, border etc so the classes will become very long. The reason for doing it this way is so the actual value (8px) can be manipulated via php to every and all instances for my CMS. What I would rather use is this:</p>
  
  <pre><code> &lt;div class="corner-tl-tr"&gt;
  </code></pre>
  
  <p>is there a way within css to do this using a regular expression so that anything with 'corner' and anything after it can combine to add any amount of corner effects to the single class?</p>
  
  <p>without knowing how to do the expression what I want is this:</p>
  
  <pre><code> .corner*-tl* {
      border-top-left-radius:8px;
  }
  </code></pre>
  
  <p>for each corner where the * is anything before or after but only after 'corner'. This way I only need 4 classes for the many possible combinations.</p>
  
  <p>Example
  I want to use corner-tl-tr-br in my html to create a div with a radius in top left, top right and bottom right. I also want to be able to use corner-tr-tl-br to create the same, but without writing a class for each variation.  If I can't find a solution I will be forced to use inline styles as the possible combinations are lots. Also my database will be storing these values which could be added or not added in any order for any div over the entire site. It would be nice to do this in four lines where each line can be combined into one. It may not even be possible but the examples so far only show me single classes, not combined ones.</p>
  
  <p>If I can help it, I don't want to have to make many styles, like - corner, corner-tl, corner-tr, corner-bl, corner-br, corner-tl-tr, corner-tr-tl, corner-tl-bl, corner-bl-tl, corner-tl-br, corner-br-tl and so on... Theoretically corner on its own is not required as that will have no radius set, so it is the same in html as not applying the class but may be needed to achieve the others, the rest however are possible in my system. I want to be able to apply any combination in a single class that has an expression in css for the 4 options.</p>