Making a circular border, behind text - not around

Question

I would am attempting to take something I've seen before and recreate it with html/css. Here is a mockup I've made in Word.

Almost everything I find is about text inside circles, not an accent behind, like this drawing. I would like to have the circle and the text centered as much as possible.

Here is the best of my attempts: https://jsfiddle.net/FNdXz/559/

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>

Obviously, I can worry about fonts and coloring later - but I'm really struggling with the positioning and could use help from a pro.

Have you seen this (https://stackoverflow.com/a/27587340/5074998)? It seems to work. — Rogério Dec, Apr 28 '18 at 03:37

score 1 · Answer 1 · answered Apr 28 '18 at 03:46

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:10%;
  border: 1px solid white;
  position : relative;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  position : absolute;
  margin-top : 100px;
  margin-left : 70px;

}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
  position : absolute;
  margin-top : 160px;
  margin-left : 50px;
}
</style>
</head>
<body>
<div id="container">

    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>
<body>
</html>

Hope this is what you are requesting for

score 1 · Accepted Answer · answered Apr 28 '18 at 03:47

Creating a circle with svg is straightforward. You can center everything in the container using flexbox.

Then center the svg behind the text using position: absolute and a lower z-index.

#container {
  height: 400px;
  width: 400px;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container>div {
  z-index: 1;
}

#test {
  color: black;
  font-size: 50px;
}

#sub-test {
  color: blue;
  font-size: 30px;
}

svg {
  position: absolute;
  z-index: 0;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
  <svg height="200" width="200">
  <circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>

score 0 · Answer 3 · answered Apr 28 '18 at 03:40

You need to utilize the position and z-index settings. With the position being set to absolute, you can define the margin from the top, right, bottom, and left sides of the parent container. z-index determines what "layer" to appear on - the higher the value, the higher precedence it gets. See the updated CSS here.

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
  position: relative;
}

#inner
{
  height:200px;
  width:200px;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 1;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  position: absolute;
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  top: 30%;
  left: 15%;
  z-index: 2;
}

#sub-test {
  position: absolute;
  top: 45%;
  left: 15%;
  z-index: 2;
  color: blue;
  text-align: center;
  font-size: 30px;
}

score 0 · Answer 4 · answered Apr 28 '18 at 08:20

Another idea is to simply use radial-gradient:

#container {
  padding:50px 0;
  width: 400px;
  background:radial-gradient(circle at center,transparent 40%,#fff 40%,#fff calc(40% + 1px),transparent calc(40% + 1px)),
  #ccc;
  display: table-cell;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
</div>

Making a circular border, behind text - not around

4 Answers4