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


Tags: css

Problem :

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;
}


Solution :

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?


    CSS Howto..

    how do I properly position & scale these elements in CSS?

    how to position a search bar in html/css

    How can I count CSS page breaks for printed HTML?

    How to create class in a custom CSS file by JavaScript?

    How to keep the aspect ratio of the image in css?

    How to make css two borders?

    how to specify background text rectangle color in CSS

    How to Find CSS Selector

    How to manage clashing third party CSS

    How do negative margins in CSS work and why is (margin-top:-5 != margin-bottom:5)?

    Rails 4: how to identify and format links, hashtags and mentions in model attributes?

    How to disable .less (dotLess CSS) syntax analysis in ReSharper 6?

    How to align

    and tags side-by-side?

    How to overlay image with color in CSS?

    More CSS woes: how to stack divs inside another div, and have them all behave?

    How to revert to original CSS?

    CSS(3): How to display elements after each other

    What is a CSS Parse error and how do I fix it?

    How to create a horse-shoe-like gauge using CSS

    How to rotate image used as list type in unordered list

    How to add a Delay on Bootstrap Dropdown Hover

    css. How to write (code) css for different window widths?

    How to use media queries for mobile devices and desktop?

    How to fire Javascript code to be the last, when all the HTML/CSS and Javascript Codes are fired?

    How to display form output in the same page by hiding the form

    How to display search icon on right side through css?

    How do I center HTML objects on an MVC 4.0 Web API using Razor application?

    HTML element positioning - How do I have an element always stay in the visible area without javascript

    How to make two separate, independent columns (using html and css)

    How to make button that changes grid dimensions using JS?