CODEWITHSUNDEEP
css
s-a-n
s-a-n

Reputation: 787

outline to only one side of div

I have tried few but is there a way to create an outline to right side of the div? somthing like the purple line in the below image https://unsee.cc/geduzopi/

Upvotes: 1

Views: 6386

Answers (3)

drewkiimon
drewkiimon

Reputation: 591

If you want to create an outline on one side and NOT a border, you can use box-shadow with inset like I did in my codepen example below. My example is good to look at if you have a border radius.

https://codepen.io/drewkiimon/pen/qeWQVx

div {
  background: pink;
  height: 250px;
  width: 250px;
  box-shadow: inset 0 1px black;
}
<div>
  
</div>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53664

use a pseudo element absolutely positioned to the right of the parent, then use translateX() to push it outside of the parent.

div {
  display: inline-block;
  width: 5em;
  background: orange;
  text-align: center;
  position: relative;
}

div:after {
  content: '';
  width: .5em;
  background: purple;
  position: absolute;
  right: 0; top: 0; bottom: 0;
  transform: translateX(200%);
<div>1</div>

Upvotes: 2

simondefreeze
simondefreeze

Reputation: 189

You can use border-right. For example

    border-right: aqua 2pt solid;

See https://www.w3schools.com/cssref/pr_border-right.asp

Upvotes: 0

Related Questions