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;
        }
    </style>
</head>
<body>
    <h2 class="border-heading" align="center" style=" color: red;">Some major tech companies</h2>
</body>    

https://www.google.com/imgres?imgurl=https%3A%2F%2Fleethams.files.wordpress.com%2F2010%2F03%2Fimage21.png&imgrefurl=https%3A%2F%2Fleethams.wordpress.com%2F2010%2F03%2F23%2Fcorner-radius%2F&tbnid=JU1Pm_xxXXzK2M&vet=12ahUKEwit0svQ2oXvAhXaFnIKHY9nBjsQMyguegUIARCdAg..i&docid=jhgkMqU34BTuCM&w=395&h=168&q=curved%20corner%20rectangle&ved=2ahUKEwit0svQ2oXvAhXaFnIKHY9nBjsQMyguegUIARCdAg

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