[ARCHIVED] HMTL Border-Radius Being Stripped When a Page is Saved

[JeffCampbell]

I have been working to style list elements so that they stand out more visibly on the pages I am creating. My pages are set up to includes steps that can be referenced when students are going through the work. The desired goal is to have the number be surrounded by a circle set to a specific color. When setting it up in the HTML editor, it will display everything correctly when I switch back out to preview the edit. When I save the page, the border-radius style tag is being stripped from the code, resulting in block shapes instead of circles.

Here is the code being used:

<div>
    <ol>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">A</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">B</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">C</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">D</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">E</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">F</li>
        <li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; border-radius: 50%; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">G</li>
    </ol>
</div>

Here is what it looks like when previewed:	Here is what it looks like when the page is saved:

When I go back to look at what is going on, the only thing that changed is the border-radius: 50%; is missing from the style element in each <li> line (it would be between color and text-align).

<li style="display: block; width: 2em; height: 2em; font-size: 1.1em; font-weight: 500; left: 0; top: -0.2em; line-height: 1; color: #ee7623; text-align: center; padding: 8px 4px 10px 4px; border: 2px solid #ee7623;">A</li>

Does anyone have a solution that might allow the style to remain a circle? I do not have access to Javascript or CSS editing. Those are locked down by our Canvas administrator.

[and-hu · Accepted solution]

Yes, the border-radius is not on the allow list unfortunately. You can poke around in your school's css stylesheet to see if they have an appropriate class you can use instead. 

The way I dealt with this was to set the list-style to none and use unicode and the Instructure font icons instead. You can also use HTML codes. This site has a lot that I pilfer off of: https://unicode-table.com/en/sets/symbols-for-nickname/

Here's a modification of what I did:

<ol style="list-style-type: none;">
    <li style="position: relative; padding-left: 15px; margin-bottom: 1.5rem;"><span style="font-size: 1.5rem; font-weight: bold; color: #ee7623; position: absolute; left: -27px; top: -1px;">Ⓐ</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque aliquet quam, quis semper odio. Duis id aliquet ipsum. Nam quis quam nec turpis dignissim venenatis. Cras urna dolor, commodo in elit sed, bibendum pharetra massa. Aliquam tincidunt condimentum felis sit amet volutpat.</li>
    <li style="position: relative; padding-left: 15px; margin-bottom: 1.5rem;"><span style="font-size: 1.5rem; font-weight: bold; color: #ee7623; position: absolute; left: -27px; top: -1px;">Ⓑ</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque aliquet quam, quis semper odio. Duis id aliquet ipsum. Nam quis quam nec turpis dignissim venenatis. Cras urna dolor, commodo in elit sed, bibendum pharetra massa. Aliquam tincidunt condimentum felis sit amet volutpat.</li>
    <li style="position: relative; padding-left: 15px; margin-bottom: 1.5rem;"><span style="font-size: 1.5rem; font-weight: bold; color: #ee7623; position: absolute; left: -27px; top: -1px;">Ⓒ</span> Lorem ipsum dolor etc etc etc&nbsp;</li>
</ol>

Which looks like this:

(Also, in your current code, the "left" and "top" attribute values are not currently having an effect because the <li> still has its position value set to static, you need to change it relative, fixed, or absolute.)

[JeffCampbell]

Thank you @and-hu. This gave me a working solution that still fits my goals. Before you had posted, I had realized that the Top and Left were unnecessary, but did not realize it was due to the position as you mentioned.

One issue that arose with unicode is that it does not go high enough for the number of steps in our course (some of the things go above 20 steps), despite liking the look of the solution you provided. But, seeing how you put some things in <li> and used the <span> tag with the unicode showed me enough to produce a variation. I tested it with some wider two digit numbers to help get a width that works regardless of single/double digit use:

<div>
    <ol style="list-style-type: none;">
        <li style="position: relative; padding-left: 20px; margin-bottom: 1.5em;">
            <span style="display: block; width: 1.5em; height: 1em; font-size: 1.5em; font-weight: bold; line-height: 1; color: #2c2c54; background-color: #ee7623; position: absolute; text-align: center; padding: 5px 4px 4px 5px; border: 1px solid #ee7623; left: -30px; top: -1px;">1.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque aliquet quam, quis semper odio. Duis id aliquet ipsum. Nam quis quam nec turpis dignissim venenatis. Cras urna dolor, commodo in elit sed, bibendum pharetra massa. Aliquam tincidunt condimentum felis sit amet volutpat.
        </li>
        <li style="position: relative; padding-left: 20px; margin-bottom: 1.5em;">
            <span style="display: block; width: 1.5em; height: 1em; font-size: 1.5em; font-weight: bold; line-height: 1; color: #2c2c54; background-color: #ee7623; position: absolute; text-align: center; padding: 5px 4px 4px 5px; border: 1px solid #ee7623; left: -30px; top: -1px;">20.</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean scelerisque aliquet quam, quis semper odio. Duis id aliquet ipsum. Nam quis quam nec turpis dignissim venenatis. Cras urna dolor, commodo in elit sed, bibendum pharetra massa. Aliquam tincidunt condimentum felis sit amet volutpat.
        </li>
        <li style="position: relative; padding-left: 20px; margin-bottom: 1.5em;">
            <span style="display: block; width: 1.5em; height: 1em; font-size: 1.5em; font-weight: bold; line-height: 1; color: #2c2c54; background-color: #ee7623; position: absolute; text-align: center; padding: 5px 4px 4px 5px; border: 1px solid #ee7623; left: -30px; top: -1px;">50.</span> Lorem ipsum dolor etc etc etc&nbsp;
        </li>
    </ol>
</div>

Which produced this:

I probably could play with the padding a bit to better get the vertical centering for my perfectionist eye, but this definitely will be enough for kids to more clearly see the step numbers when telling them to go to a particular step. Thank you.