css right and left border of image go over top border

Question

check this out http://codepen.io/anon/pen/jfIil/

css code

.xyz {
    margin: 50px;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-right: 1px solid #DEDEE0;
    border-bottom: 1px solid #DEDEE0;
    border-left: 1px solid #DEDEE0;
    border-top: 3px solid #73A784;
}

you see the top-left and top-right corners ? why is it like this ? and how can I fix it ? I'm talking about the the top border get "cutted" in the corners ... thanks!!

Answer 1

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: red blue green yellow;
  border-style: solid dashed dotted double;
  border-width: 20px 10px 5px 15px;
}

This will set different widths, border-color and border-style for each of the four borders.

In addition, each of those properties can be broken down even further with border-left-style, border-top-width, border-bottom-color, and so on.

Checkout the fiddle here to understand better

.box {
  width: 150px;
  height: 150px;
  margin: 20px auto;
  border-color: red blue green yellow;
  border-style: solid dashed dotted double;
  border-width: 20px 10px 5px 15px;
}

Solution here

css

.xyz {
    margin: 50px;
    width: 300px;
    height: 300px;
    background-color: #fff;
    border-left: 20px solid black;
    border-right: 20px solid black;
    box-shadow: 0px -20px 0 0 red;
    height: 150px;
    width: 150px;
}