how can I put 3 internal borders to a single div with differents width and border-color? should I cr-CodePudding

There are 3 borders (green,white, internal border black I suggest) and each one with its color and border-radius. I don't know if I should create 3 divs and to each one put the border properties and if on the contrary everything can be done in the same div.

basically I have this design:

https://i.stack.imgur.com/Hxv8J.png

I would like to know the best way to do it, thank you very much.

this is my idea:

*{
  box-sizing:border-box;
}

.border1{
  width:400px;
  height:300px;
  border:20px solid green; 
  border-radius: 20px;

}

.border2{
  border:15px solid white; 
  width:100%;
  height:100%;
  border-radius: 10px;
}

.content{
 background:black;
 display: flex;
 justify-content: center;
 align-items: center;
 width:100%;
 height:100%;
 border-radius: 10px;
 color:white;
}

<div class="border1">
  <div class="border2">
    <div class="content">
      <span>Growth</span>
    </div>
  </div>
</div>

CodePudding user response：

Basically you've have to use Multiple Boxes and Containers to achieve this. Use the following Snippet to understand it better.

body {
  padding: 20px;
}

.module {
  width: 200px;
  height: 200px;
  background: #555;
  position: relative;
  border: 5px solid blue;
  margin: 20px;
}

.module:after {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  bottom: -15px;
  background: red;
  z-index: -1;
}

<div class="module">
</div>

CodePudding user response：

As the borders are purely decorative you could use pseudo before and after elements to produce the white and green rather than put extra elements into the actual HTML.

This snippet sets the width of the green and while borders and the distance between the whole thing and the edge of the viewport as CSS variables and uses CSS calc function to place a white before pseudo element and a green after pseudo element behind the black one. That way you can get 3 different radii as required.

Obviously you will want to change the radii in this code to suit your particular need.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
  background: black;
}

.borders {
  --greenW: 30px;
  --whiteW: 10px;
  --edge: 20px;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% - (2 * (var(--greenW)   var(--whiteW)   var(--edge))));
  height: calc(100% - (2 * (var(--greenW)   var(--whiteW)   var(--edge))));
  border-radius: 10px;
  color: white;
  font-size: 10vw;
  font-family: sans-serif;
  font-weight: bold;
  position: relative;
  left: calc(var(--whiteW)   var(--greenW)   var(--edge));
  top: calc(var(--whiteW)   var(--greenW)   var(--edge));
}

.borders::before {
  content: '';
  display: inline-block;
  width: calc(100%   (2 * var(--whiteW)));
  height: calc(100%   (2 * var(--whiteW)));
  background-color: white;
  border-radius: 10px;
  position: absolute;
  top: calc(-1 * var(--whiteW));
  left: calc(-1 * var(--whiteW));
  z-index: -1;
}

.borders::after {
  content: '';
  display: inline-block;
  width: calc(100%   (2 * (var(--whiteW)   var(--greenW))));
  height: calc(100%   (2 * (var(--whiteW)   var(--greenW))));
  background-color: green;
  position: absolute;
  top: calc(-1 * (var(--whiteW)   var(--greenW)));
  left: calc(-1 * (var(--whiteW)   var(--greenW)));
  border-radius: 40px;
  z-index: -2;
}

<body>
  <div class="borders">Growth</div>
</body>

</html>

CodePudding user response：

You can't do that with only border. I used box-shadow and border for this.

body {
 background:#dadada;
}

#bordered {
  height: 200px;
  width: 200px;
  border: 10px solid white;
  box-shadow: 0px 0px 0px 10px #00ff1c , inset 0px 0px 0px 10px black;
  border-radius: 4px;
}

<div id="bordered"></div>