Border around first half of the ordered list

Question

I need to display Terms and Conditions as HTML on a web page. As seen in the below screenshot I need to create borders around sections of the terms and conditions that need to be signed. The problem is I don't know how to create this border (first one in screenshot) so that it wraps around the area I need.

HTML:

<!-- MORE HTML ELEMENTS ABOVE -->

<li class="parent"><strong>CTU's Rights and Obligations</strong>
    <ol>
        <li class="child"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
        <li class="child border-end">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
            <ol>
                <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
                <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
                <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
            </ol>
        </li>
        <li>Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student, where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
        <li>Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition, participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and payable.
        </li>
    </ol>

    <!-- MORE HTML ELEMENTS BELOW -->

</li>

Things I have tried:

1. Border around parent

// Doesnt work, border is around whole ordered list
.parent {
    border:1px solid
}

2. Border around parent and children

// Works for top border, but not sure how to get left & right border
.parent {
    border-top:1px solid black;
}
// Kind of works, not sure how to extend borders
.border-end {
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

3. Using pseudo elements

This seems to be the best solution so far but its not 100% yet. Problem is the height of the text might differ so not too sure how not to hard-code the width and height. Here is an example of the below:

.parent {
    position: relative;
    padding-top: 20px;
    margin-top: 20px;
}
.parent:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 110%;
    background: #000;
    top: 0;
    left: -5%;
}
.border-end {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.border-end:after {
    content: "";
    position: absolute;
    height: 1px;
    width: 115%;
    background: #000;
    bottom: 0;
    left: -10%;
}
.border-end:before {
    content: "";
    position: absolute;
    height: 136%;
    width: 1px;
    background: #000;
    top: -37%;
    left: -10%;
}

Any help would be greatly appreciated!

Answer 1

You can do it with so much tweeks.

.border {
  border: 1px solid black
}

.wrapper {
  position: relative;
}

.wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 32px;
  border: 1px solid black;
  border-bottom: none
}

ol.parent {
  width: 100%;
  padding: 0;
  margin-top: 15px;
  counter-reset: item;
  position: relative;
}

.child {
  padding: 0 30px;
  list-style: none;
  counter-increment: item;
  width: calc(100% - 60px);
}
.child:before {
  content: counter(item) ". ";
  position: absolute;
  left: 16px;
}

.border-side {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.border-bottom {
  border-bottom: 1px solid black;
}

<li class="wrapper"><strong>CTU's Rights and Obligations</strong>
  <ol class="parent">
    <li class="child border-side"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
    <li class="child border-side border-bottom">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
      <ol>
        <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
        <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
        <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
      </ol>
    </li>
    <li class="child">Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student,
      where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
    <li class="child border">Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition,
      participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and
      payable.
    </li>
  </ol>

  <!-- MORE HTML ELEMENTS BELOW -->

</li>

Answer 2

Try simpler way:

.bordered {
  border:1px solid black
}

.bordered-no-top {
  border-top:none
}

.bordered-no-bottom{
  border-bottom:none
}

<li class="parent"><strong>CTU's Rights and Obligations</strong>
    <ol>
        <li class="child bordered bordered-no-bottom"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
        <li class="child bordered bordered-no-top">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
            <ol>
                <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
                <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
                <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
            </ol>
        </li>
        <li>Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student, where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
        <li class="bordered">Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition, participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and payable.
        </li>
    </ol>

    <!-- MORE HTML ELEMENTS BELOW -->

</li>

Answer 3

You could also do something like this:

.border-start {
         border-top: solid black;
         border-left: solid black;
         border-right: solid black;}
.border-middle {
         border-left: solid black;
         border-right: solid black;}
.border-end {
         border-bottom: solid black;
         border-left: solid black;
         border-right: solid black;}

<li><strong>CTU's Rights and Obligations</strong>
    <ol>
        <li class="border-start"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
        <li class="border-end">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
            <ol>
                <li>in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
                <li>in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
                <li><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
            </ol>
        </li>
        <li>Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student, where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
        <li>Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition, participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and payable.
        </li>
    </ol>

    <!-- MORE HTML ELEMENTS BELOW -->

</li>

With li{list-style-position:inside;} you have the numbers inside the borders aswell

Answer 4

Have a look into using the nth-child selectors. I've created the below example, which highlights the second li and all its children. It's just the case of adding more selectors to highlight the options you require.

.parent ol li:nth-child(3n-1) {
  border:1px solid black;
}

.sub-child {
  border:none!important;
}

<li class="parent"><strong>CTU's Rights and Obligations</strong>
    <ol>
        <li class="child"><strong>CTU</strong> will offer the <strong>Student</strong> tutor-facilitated and/or virtual instructor-led and/or <strong>Blended Tuition</strong> in the year for the <strong>Programme</strong>.</li>
        <li class="child border-end">The <strong>Parties</strong> acknowledge that <strong>CTU</strong> provides facilitator-led tuition and therefore:
            <ol>
                <li class="sub-child">in the event of resignation or sickness or temporary indisposition of a facilitator, classes may become disrupted and be rescheduled;</li>
                <li class="sub-child">in the event of a permanent indisposition of the facilitator, <strong>CTU</strong> shall within reasonable time constraints, once the permanent indisposition has been confirmed, engage the services of another facilitator; and</li>
                <li class="sub-child"><strong>CTU</strong> shall not be liable for any disruption or rescheduling of classes due to a facilitator's personal indisposition.</li>
            </ol>
        </li>
        <li>Provisional timetables for the year shall be made available to the Student at the time of the commencement of the Student's Programmes. CTU reserves the right at, any time, to alter the timetables, with adequate notice being given to the Student, where reasonably possible. No other commitments should be made by the Student prior to receiving the schedule.</li>
        <li>Subject to <strong>CTU's</strong> rights to cancel any <strong>Programme</strong> on the terms and conditions set out hereunder, this <strong>Form</strong> constitutes an undertaking on the side of the <strong>Student</strong> to receive the tuition, participate in the <strong>Programme</strong> enrolled for and for the <strong>Student</strong> and/or the <strong>Parent/Guardian</strong> to pay the <strong>Programme Fees</strong> in full, as and when the <strong>Fees</strong> become due and payable.
        </li>
    </ol>

    <!-- MORE HTML ELEMENTS BELOW -->

</li>