How to add white space before an element's border using CSS

Issue

My work required a small space just before the left red border (image attached for reference). How can I achieve this?

My code is below. (Please see a close look at the red border and the space between the black thin border. And the red thick border is the one I want to achieve; I don’t want margin-left. It is the space inside the div.)

<p style="width:350px;height:200px;border-left:3px solid red;background-color:grey;">
  Start editing to see some magic happen :)
</p>

Solution

You could use a pseudo-element with position absolute instead of a border for the red line. Then you should also add some padding-left or text-indent to the p element.

p {
  border: 1px solid black;
  position: relative;
  padding-left: 10px;
}

p:before {
  content: '';
  border-left: 3px solid red;
  height: 100%;
  position: absolute;
  left: 5px;
}

<p style="width:350px;height:200px;background-color:grey;">
  Start editing to see some magic happen :)
</p>

Answered By - Nenad Vracar