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

HTML-CSS
1
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

2

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

3

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

4

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.

5

Sorry, didn’t get you.

6

Screenshot 2021-02-26 005225 (2)
Screenshot 2021-02-26 005225 (2)1908×1001 77.1 KB

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.

7

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
8

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