Question 206912 in CSS Question posted in
Some basic documentation can be found here.

Css – How to make border with elongated sharp corners

enter image description here

How to make that type of border in CSS?

I have try border-radius with (-) sign but it didn’t work. Please help me.

Also İ tried to use :after :before properties but its also didn’t work.

If you have any idea please help me solve this problem.

Tags:

5

Answers


  1. 0

    You can do that either by using clip-path directly on that specific element or adding a :before or :after or a child element as a decoration element to deal with the right corner.

    Login or Signup to reply.
  2. 0

    Here is an idea using pseudo-elements. I considered CSS variables so you can easily adjust the shape without touching the code.

    .box {
  --b: 4px;  /* border thickness */ 
  --c: red;  /* border color */
  --r: 30px; /* radius */

  margin: 40px;
  display: inline-block;
  font-size: 40px; 
  padding: 20px;
  border: var(--b) solid var(--c);
  background: #fff;
  border-radius: var(--r) 0 var(--r) var(--r);
  position: relative;
  clip-path: inset(-100px 0);
}
.box:before {
  content:"";
  position: absolute;
  left: var(--r);
  right: calc(-1*var(--b));
  bottom: 100%;
  height: var(--r);
  border-right: var(--b) solid var(--c);
  border-bottom: var(--b) solid var(--c);
  border-bottom-right-radius: var(--r);
  box-shadow: var(--r) var(--b) 0 #fff;
}
.box:after {
  content:"";
  position: absolute;
  right: calc(-1*var(--b));
  bottom: calc(100% - var(--b));
  width: var(--b);
  height: var(--r);
  background: var(--c);
}

body {
  background: #eee
}
    <div class="box">
  some text<br>
  content
</div>
    Login or Signup to reply.
  3. 0 
    body {
  display:flex;
  height:100vh;
  align-items:center;
  justify-content: center;
  background-color: #e7d39f;
}

div {
  position:relative;
  width: 200px;
  height: 80px;
  background: #522d5b;
  border-radius:25px;
  border-top-left-radius:0;
}

div:before {
  content: "";
  position:absolute;
  top:-40px;
  left:0;
  height:40px;
  width: 40px;
  border-bottom-left-radius: 60%;
  box-shadow: 0 22px 0 0 #522d5b;
}
    <!DOCTYPE html>
<html>
<head></head>
<body>

<div></div>

</body>
</html>

    Play with CSS raduises & box-shadow and see what happens! ; )

    Login or Signup to reply.
  4. 0

    Example using CSS clip-path.

    It mimics a border by adding the same clip-path to a slightly larger wrapping element.

    Inspiration: How to add border in my clip-path: polygon(); CSS style

    Good explanation on SVG paths: SVG rounded corner

    .bubble {
  background: #1997d6;
  height: 150px;
  width: 220px;
  position: relative;
  clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}

.bubble>div {
  padding: 12px;
  box-sizing: border-box;
  position: absolute;
  height: 100%;
  width: 100%;
  transform: scale(0.96);
  color: #1997d6;
  background: white;
  clip-path: path('M0,8 h180 a40,20 0 0 0 40,-10 v110 a40,40 0 0 1 -40,40 h-135 a40,40 0 0 1 -40,-40 v-60 a40,40 0 0 1 40,-40 z');
}
    <div className="bubble">
  <div>

  </div>
</div>
    Login or Signup to reply.
  5. 0 
    <div class="dialog">
  Some text here to tell you the truth about life.
</div>

<div class="dialog dialog--outline">
  Some other text to show you life when it has borders.
</div>

    body {
  color: #3e3e3e;
  margin: 4rem;
  background: #f4c1f3;
}

.dialog {
  z-index: 10;
  margin: 2rem;
  background: #4fc1f3;
  padding: 1rem;
  border-radius: 1rem 0 1rem 1rem;
  display: inline-block;
  position: relative;
}
.dialog:after, .dialog:before {
  z-index: 0;
  content: "";
  position: absolute;
  top: 0;
  transform: translateY(-100%);
  width: 1rem;
  height: 1rem;
}
.dialog:before {
  background: inherit;
  right: 0;
}
.dialog:after {
  background: #f4c1f3;
  right: 0;
  border-radius: 0 0 1rem 0;
}
.dialog--outline {
  z-index: 100;
  background: #fff;
  border: 1px solid #4fc1f3;
}
.dialog--outline:before, .dialog--outline:after {
  right: -1px;
  border: 1px solid transparent;
  border-right-color: #4fc1f3;
}
.dialog--outline:before {
  border-bottom-style: none;
}
.dialog--outline:after {
  border-bottom-color: #4fc1f3;
}

    Check the live code on pen

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search