Home / Questions / 7535
Accepted
Jordi Castilla
Asked: 2020-04-12 12:03:51 +0800 CST 2020-04-12 12:03:51 +0800 CST

Simplify CSS

  • 772

I have a margin made like this ( Fiddle example ):

.menu--margen {
    background: #f4f4f4;
    border-right: 1px solid #bbbbbb;
    border-left: 1px solid #bbbbbb;
    border-top: 1px solid #bbbbbb;
    border-bottom: none;
    margin: 3px auto;
    position: relative;
}

.menu--margen:before {
    padding: 20px;
    border-right: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    border-top: none;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Is there a way to simplify the css of the border? I have tried:

border: 1px 1px 0px 1px solid #f0f0f0;

But it doesn't seem to work.

html

1 Answers

  1. Best Answer

    These lines:

    border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: none;

    You can simplify it into these two lines:

    border: 1px solid #bbb;
border-bottom: none;

    Where the first defines the style of the four borders and the second only disables the bottom border. Also optionally since it #bbbbbbhas the same 6 hexadecimal digits you can simplify it as#bbb

    In the same way you can do with those that are in the other style

    border-right: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: none;

    You can change it to:

    border: 1px solid #f0f0f0;
border-top: none;
    • 8