How to remove some part of borders from the corners?

问题

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

回答1:

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>

回答2:

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>

回答3:

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

回答4:

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>

来源：https://stackoverflow.com/questions/40803132/how-to-remove-some-part-of-borders-from-the-corners

标签

html

css

rounded-corners

corner-detection