I wanted to create a heading with a sleek curved cornered border. But it's not happening. I've completed 'basic CSS' part of responsive web design course

body { background-color: black; }
        .border-heading {
            border-style: solid;
            border-color: blue;
            border-width: 5px;
            border-radius: 10% 10% 10% 10%;
            background-color: blue;
    <h2 class="border-heading" align="center" style=" color: red;">Some major tech companies</h2>


Any reason you’ve set the border radius values in percentages?

No. Just used it because I remembered the % course properly.

Well, just it’ll be 10% of the height and 10% of the width, you won’t be able to get regular corners on anything except a square.

Sorry, didn’t get you.

This is what I’m getting. The borders don’t seem to be the kind of round I was expecting. Btw thanks for your help anon.

Say you have a rectangle that is 400 by 100. What is 10% of 400 and what is 10% of 100? Now draw a curve between those points.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.