Search code examples
cssborderabbreviation

CSS border abbreviation

I want to trim my CSS border statement. I know there is a possibility, but I found always that one in the internet e.g. :

Solution

  • You would better do it through classes like this:

    .box{
    width: 100px;
    height: 100px;
    margin: 20px;
    float: left;
}    
.border{
    border-width: 5px;
    border-style: solid;
    border-color: #98bf21;
}
.b1{ border-width: 5px 10px 15px 2px; }
.b2{ border-width: 5px 7px 10px 7px; }
.b3{ border-width: 15px 2px 10px 5px; }
    <div class="box border b1"></div>
<div class="box border b2"></div>
<div class="box border b3"></div>