CODEWITHSUNDEEP
htmlcssrounded-cornerscorner-detection
Vahdet Yavuz
Vahdet Yavuz

Reputation: 91

How to remove some part of borders from the corners?

I want to remove the corners of borders like this picture.

What I need to draw

Upvotes: 0

Views: 10549

Answers (5)

Anil kumar
Anil kumar

Reputation: 1628

Use clip-path property to clip corner

div{
    width: 15em;
    height: 5em;
    border: 2px solid red;
    clip-path: polygon(0 0, 91% 0, 100% 12%, 100% 100%, 12% 100%, 0 89%);
}
<div></div>

Upvotes: 0

Mohammad Usman
Mohammad Usman

Reputation: 39322

You can use css3 linear-gradient to draw this background to just a single <div> element and without using any pseudo elements.

div {
  background-image: linear-gradient(to left, transparent 20px, orange 20px),
                    linear-gradient(to bottom, transparent 20px, orange 20px),
                    linear-gradient(to right, transparent 20px, orange 20px),
                    linear-gradient(to top, transparent 20px, orange 20px);
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;      
}


div {
  background-color: #eee;
  background-image: linear-gradient(to left, transparent 20px, orange 20px),
                    linear-gradient(to bottom, transparent 20px, orange 20px),
                    linear-gradient(to right, transparent 20px, orange 20px),
                    linear-gradient(to top, transparent 20px, orange 20px);
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  position: relative;
  margin: 0 auto;
  height: 100px;
  width: 80%;
}
<div></div>

Upvotes: 2

SBimochan
SBimochan

Reputation: 458

You can do it by following:

        #rectangle{
        width:400px;
        height: 200px;
        border-style: solid;
        color:orange;
        position: absolute;
    }
    #eraser1{
    position: absolute;
        width: 50px;
        height: 50px;
        background-color:white;
        margin: -10px 0px 0px 374px;
    }
    #eraser2{
    position: absolute;
        width: 50px;
        height: 50px;
        background-color:white;
        margin: 175px 0px 0px -13px;
    }

Upvotes: 0

connexo
connexo

Reputation: 56754

You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border:

.bordery {
  border: 1px solid teal;
  padding: 20px;
  position: relative;
}
.bordery::after,
.bordery::before {
  background-color: white;
  content: "";
  display: block;
  height: 10px;
  position: absolute;
  width: 10px;
}
.bordery::after {
  bottom: -1px;
  right: -1px;
}
.bordery::before {
  top: -1px;
  left: -1px;
}
<div class="bordery">This is just some sample content.</div>

Upvotes: 4

Nenad Vracar
Nenad Vracar

Reputation: 122047

You can use :before and :after pseudo elements to create this.

.el {
  position: relative;
  width: 200px;
  height: 50px;
  margin: 50px;
}
.el:after,
.el:before {
  content: '';
  position: absolute;
  height: 90%;
  width: 100%;
}
.el:before {
  top: -5px;
  left: -5px;
  border-top: 1px solid orange;
  border-left: 1px solid orange;
}
.el:after {
  bottom: -5px;
  right: -5px;
  border-bottom: 1px solid orange;
  border-right: 1px solid orange;
}
<div class="el"></div>

Upvotes: 3

Related Questions