CSS border-top-left-radius Property

CSS border-top-left-radius Property

This property is used to round the top-left border corner specifically.

Syntax -

border-top-left-radius: horizontal-radius vertical-radius

Now we will see Example -

NOTE -

Mozilla-based browsers like Firefox define this property as –moz-border-radiustopleft while WebKit-based browsers like Chrome and Safari define it more traditionally as –webkit-border-top-left-radius.

Given the differences, you should test it carefully as syntax may change.

Example -

<!DOCTYPE html>
<html>
<style>
h1{
border: 5px solid rgb(11, 185, 216);
padding: 10px;
border-top-left-radius: 40%;
background-color: rgb(222, 245, 245);

}

</style>
<body>
<h1 class="one">This is a heading</h1>
</body>
</html>

Output -

Example 2 - Adding background image-

Output -