css, маркерованый список ul li, задать округление бордеру

.guideIntro span, .h1-custom-blog h1{
        font-family: 'Gilroy-Medium', sans-serif !important;
    }
    .h1-custom-blog h1{
        text-transform: capitalize;
    }

    .headerContainer h2 a{
        color: #1a8dcd;
        margin: 15px auto 25px;
        font-family: 'Gilroy-Semibold', sans-serif !important;
    }
    .headerContainer h2 a:hover, .articleContainer a:hover{
        color: #ef7000;
    }

    .icon.icon-chevron{
        width: 14px;
        height: 14px;
        border-top: 2px solid #1a8dcd;
        border-right: 2px solid #1a8dcd;
        margin-top: 20px;
        margin-right: 16px;
        float: left;
        transform: rotate(45deg);
    }
    .categoryBlock{
        border: 2px solid #ccc;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem;
        margin: .75rem 0;
        width: 100%;
    }
    .categories-custom-block{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .articleContainer{
        display: flex;
        flex-wrap: wrap;
        line-height: 1.78em;
        margin-left: 15px;
    }
    .categories-custom-block ul.content-list>li{
        list-style: none;
        margin-left: 13px;
        padding: 8px 0 0 15px;
        position: relative;
    }
    .articleContainer ul.content-list>li{
        border-left: 2px solid #1a8dcd;
        flex-grow: 1;
        padding: 8px 23px!important;
    }
    .articleContainer ul.content-list{
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-wrap: wrap;
        margin: 0;
        width: 50%;
    }
    .articleContainer a{
        color: #666;
        font-size: 1.2rem;
        font-family: 'gilroy-semibold', sans-serif !important;
    }
    @media (max-width: 767px){
        .articleContainer ul.content-list {
            width: 100%;
        }
    }
<div class="categories-custom-block"><div class="categoryBlock"><div class="headerContainer"><h2><a href="#"><div class="icon icon-chevron"></div>Uncategorized</a></h2><div class="articleContainer"><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li><li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li><li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li><li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li></ul><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li></ul></div></div></div></div>

Я пытаюсь по левой стороне сделать округление для бордера, на сколько я понял это должен сделать position:relative, но это не срабатывает. Как правильно это реализовать?

Что я хочу получить

введите сюда описание изображения

Что выходит у меня

введите сюда описание изображения


Ответы (2 шт):

Автор решения: Vladimir Gonchar

Магическим образом ничего происходить не будет. Уж тем более если маркеры Вы через CSS убрали (list-style: none;). Такие маркеры всегда рисуются самостоятельно через :before или :after.

.guideIntro span,
.h1-custom-blog h1 {
  font-family: 'Gilroy-Medium', sans-serif !important;
}

.h1-custom-blog h1 {
  text-transform: capitalize;
}

.headerContainer h2 a {
  color: #1a8dcd;
  margin: 15px auto 25px;
  font-family: 'Gilroy-Semibold', sans-serif !important;
}

.headerContainer h2 a:hover,
.articleContainer a:hover {
  color: #ef7000;
}

.icon.icon-chevron {
  width: 14px;
  height: 14px;
  border-top: 2px solid #1a8dcd;
  border-right: 2px solid #1a8dcd;
  margin-top: 20px;
  margin-right: 16px;
  float: left;
  transform: rotate(45deg);
}

.categoryBlock {
  border: 2px solid #ccc;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  margin: .75rem 0;
  width: 100%;
}

.categories-custom-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.articleContainer {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.78em;
  margin-left: 15px;
}

.categories-custom-block ul.content-list>li {
  list-style: none;
  margin-left: 13px;
  padding: 8px 0 0 15px;
  position: relative;
}

.articleContainer ul.content-list>li {
  border-left: 2px solid #1a8dcd;
  flex-grow: 1;
  padding: 8px 23px!important;
}

.articleContainer ul.content-list>li:before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid #1a8dcd;
  position: absolute;
  content: '';
  left: -7px;
  display: block;
  top: 16px;
  background: #fff;
}

.articleContainer ul.content-list {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0;
  width: 50%;
}

.articleContainer a {
  color: #666;
  font-size: 1.2rem;
  font-family: 'gilroy-semibold', sans-serif !important;
}

@media (max-width: 767px) {
  .articleContainer ul.content-list {
    width: 100%;
  }
}
<div class="categories-custom-block">
  <div class="categoryBlock">
    <div class="headerContainer">
      <h2>
        <a href="#">
          <div class="icon icon-chevron"></div>Uncategorized</a>
      </h2>
      <div class="articleContainer">
        <ul class="content-list">
          <li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li>
        </ul>
        <ul class="content-list">
          <li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li>
          <li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

→ Ссылка
Автор решения: Alexey Vladimirov

Думаю, что .content-list > li:before вполне можно применить:

.content-list > li:before {
  --bullet-radus:0.3em; 
  content:'';
  position: absolute;
  top:1em;
  left:calc(-1px - var(--bullet-radus));
  width: calc(var(--bullet-radus) * 2);
  height: calc(var(--bullet-radus) * 2);
  border: solid 2px #1a8dcd;
  background-color: white;
  border-radius:50%;
  box-sizing:border-box;
}


/*------------------------------------------------------*/

.guideIntro span, .h1-custom-blog h1{
        font-family: 'Gilroy-Medium', sans-serif !important;
    }
    .h1-custom-blog h1{
        text-transform: capitalize;
    }

    .headerContainer h2 a{
        color: #1a8dcd;
        margin: 15px auto 25px;
        font-family: 'Gilroy-Semibold', sans-serif !important;
    }
    .headerContainer h2 a:hover, .articleContainer a:hover{
        color: #ef7000;
    }

    .icon.icon-chevron{
        width: 14px;
        height: 14px;
        border-top: 2px solid #1a8dcd;
        border-right: 2px solid #1a8dcd;
        margin-top: 20px;
        margin-right: 16px;
        float: left;
        transform: rotate(45deg);
    }
    .categoryBlock{
        border: 2px solid #ccc;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem;
        margin: .75rem 0;
        width: 100%;
    }
    .categories-custom-block{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .articleContainer{
        display: flex;
        flex-wrap: wrap;
        line-height: 1.78em;
        margin-left: 15px;
    }
    .categories-custom-block ul.content-list>li{
        list-style: none;
        margin-left: 13px;
        padding: 8px 0 0 15px;
        position: relative;
    }
    .articleContainer ul.content-list>li{
        border-left: 2px solid #1a8dcd;
        flex-grow: 1;
        padding: 8px 23px!important;
    }
    .articleContainer ul.content-list{
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-wrap: wrap;
        margin: 0;
        width: 50%;
    }
    .articleContainer a{
        color: #666;
        font-size: 1.2rem;
        font-family: 'gilroy-semibold', sans-serif !important;
    }
    

    
    
    @media (max-width: 767px){
        .articleContainer ul.content-list {
            width: 100%;
        }
    }
<div class="categories-custom-block"><div class="categoryBlock"><div class="headerContainer"><h2><a href="#"><div class="icon icon-chevron"></div>Uncategorized</a></h2><div class="articleContainer"><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/can-frames-and-glasses-work-better-than-lenses/">Can frames and glasses work better than lenses?</a></li><li><a href="https://linzar.com.ua/2017/01/18/drinking-juice-daily-can-boost-energy-of-eyes/">Drinking Juice daily can boost energy of eyes?</a></li><li><a href="https://linzar.com.ua/2017/01/18/dry-eyes-reason-and-symptoms-how-to-get-rid-of-it/">Dry eyes reason and symptoms how to get rid of it</a></li><li><a href="https://linzar.com.ua/2017/01/18/exercises-to-keep-eyes-healthy-and-awesome/">Exercises to keep eyes healthy and awesome</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-can-milk-help-my-eyes-stay-stronger-forever/">How can milk help my eyes stay stronger forever?</a></li></ul><ul class="content-list"><li><a href="https://linzar.com.ua/2017/01/18/how-does-lasik-surgery-help-to-get-rid-of-glasses/">How does lasik surgery help to get rid of glasses</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-eyes-can-be-cared-in-best-way-for-protection/">How Eyes Can Be Cared In Best Way For Protection?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-eyes-are-for-a-human-to-protect/">How important eyes are for a human to protect?</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-important-our-food-is-for-keeping-eyes-healthy/">How Important Our Food is For keeping eyes Healthy</a></li><li><a href="https://linzar.com.ua/2017/01/18/how-often-i-should-change-my-frame-of-glasses/">How often i should change my frame of glasses</a></li></ul></div></div></div></div>

→ Ссылка