Inverted box border in css how to get this pixel perfect

Question

Below is the code which is displaying the inverted border, I did change the values in profile-box:after but it doesn't seem to get anywhere near this:

Image of what i want to achieve

If its not possible to achieve this in css then I'll have to use the background image.

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "" !important;
  display: block !important;
  background: #fff !important;
  position: absolute !important;
  top: -20px !important;
  right: -20px !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 20px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<br>
<div class="row">
        <div class="col-md-6">
        <div class="profile-box ">
        
        </div>
        
        </div>
        
        </div>
        
</div>

<br><br><br><br>

Try using https://bennettfeely.com/clippy/ here you can define the path with how you want to clip an element. edit: just saw your form is not possible to achieve with this site but it should give you a good starting point. You can't only use straight lines as shown on the site you can use any polygon. — cloned, Apr 24 '19 at 07:00
Please don't use "!important", That's a bad rule of writing CSS — Thanveer Shah, Apr 24 '19 at 07:13

score 0 · Answer 1 · answered Apr 24 '19 at 06:53

I think this code will help you if you want more big of the white section then increase the width of "profile-box: after" and minus "top" and "right" position in 50% of the main width.

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "" !important;
  display: block !important;
  background: #fff !important;
  position: absolute !important;
  top: -50px !important;
  right: -50px !important;
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
<br>
<div class="row">
        <div class="col-md-6">
        <div class="profile-box ">
        
        </div>
        
        </div>
        
        </div>
        
</div>

<br><br><br><br>

kukkuz · Answer 2 · 2019-04-24T09:43:56.637

You can use radial gradient background to achieve this - see demo below:

.profile-box {
  position: relative;
  overflow: hidden;
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
  background: radial-gradient(10px 10px at top right,transparent 49px,#7a277b 50px);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>

If you are using pseudo elements, you can do it easier:

position to the top right using top:0 and right: 0,
use translate to position the pseudo element.

See demo below:

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after{
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  right: 0;
  top: 0;
  transform: translate(50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>

Another option is to use clip-path circle on a pseudo element but using a background color (that matches with surrounding elements) - see demo below:

.profile-box {
  background: #7a277b;
  position: relative;
  overflow: hidden; 
  padding: 35px 35px 15px 15px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  height: 400px;
}

.profile-box:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  clip-path: circle(50px at 100% 0);
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <br>
  <div class="row">
    <div class="col-md-6">
      <div class="profile-box"></div>
    </div>
  </div>
</div>

Inverted box border in css how to get this pixel perfect

2 Answers2