CODEWITHSUNDEEP
css
Fortytwo
Fortytwo

Reputation: 127

How can I add a border to the right side of this object?

How can I add a border to the right side of this object to complete the square with the same properties as the border of the left. Adding box-shadow: 20px 0 0 0 red; does not work but overrides the left border.

https://jsfiddle.net/kheuz1z4/

HTML

CSS 

#borders {
  border-top: 20px solid black;
  box-shadow: -20px 0 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

Upvotes: 0

Views: 87

Answers (3)

Nishant Kumar Verma
Nishant Kumar Verma

Reputation: 442

#borders {
  border-top: 20px solid black;
  border-right: 20px solid black, , 20px 0 0 0 red;
  box-shadow: -20px 0px 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

Please check if you want like this https://jsfiddle.net/kheuz1z4/2/

enter image description here

Upvotes: 0

MikkoS
MikkoS

Reputation: 96

You can comma seperate box-shadow:

  #borders {
  border-top: 20px solid black;
  box-shadow: -20px 0 0 0 red, 20px 0 0 0 red;
  border-bottom: 20px solid green;
  height: 150px;
  margin: 30px;
  width: 150px;
  border-radius: 20px 20px 0px 0px;
}

Source: Is there a way to use two CSS3 box shadows on one element?

Upvotes: 2

Rajeev Radhakrishnan
Rajeev Radhakrishnan

Reputation: 1004

border-top-right-radius:  //Value

I think you can find a solution by adding the top css file

Upvotes: 0

Related Questions