How to create CSS3 property for each corners ?

How to create CSS3 property for each corners ?

Last Updated : 19 Jul, 2022

In this article, we will learn how to style a corner using the CSS3 property. You can achieve this task by using border-radius properties.

The border-radius property in CSS is used to round the corners of the outer border edges of an element. This property can contain one, two, three, or four values. The border-radius property is used to set the border radius. This property is not applicable to the table elements when the border is collapsing.

Syntax:

border-radius: value;

Example 1: This example illustrates the border-radius property whose value is specified by a single value.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>How can you create CSS3 property 
             for each corner?</title>
    <style>
        .GFG {
            border-radius: 20px 50px ;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3><br><br>
        <div class="GFG">
            <h2>GfG</h2>
        </div>
    </center>
</body>
</html>

Output:

Example 2: In the below code, we will learn how can you create CSS3 property for each corner.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>How can you create CSS3 
             property for each corner?</title>
    <style>
        .GFG {
            border-radius: 20px 50px 90px 140px;
            background: #009900;
            padding: 30px;
            text-align: center;
            width: 300px;
            height: 120px;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>A computer science portal for geeks</h3><br><br>
        <div class="GFG">
            <h2>GfG</h2>
        </div>
    </center>
</body>
</html>

Output:

How to create CSS3 property for each corners ?

K

krishna_97

Improve

Article Tags :

Similar Reads

How to create and style border using CSS ?

The border property is used to create a border around an element and defines how it should look. There are three properties of the border. border-colorborder-widthborder-style border-style property: This defines how the border should look like. It can be solid, dashed, offset, etc. The following val

Fabric.js Group cornerStyle Property

In this article, we are going to see how to set the cornerStyle of a Group of the canvas using Fabric.js. The Group in Fabric.js is movable and can be stretched according to requirements. Further, the Group can be customized when it comes to initial stroke color, height, width, fill color, or stroke

How to create a 3D ridge border using CSS?

In CSS, the border-style property is used to set the line style of the border of an element. The border-style property may have one, two, three, or four values. When the specified value is one, the same style is applied to all four sides. When the specified value is two, the first style is applied t

CSS border-left-style Property

The CSS border-left-style property is used to set the style of the left border of an element.Default Value: noneSyntax:Â Â border-left-style: none| hidden| dotted| dashed| solid| double | groove| ridge| inset| outset| initial| inherit;Properties Value:Â ValueDescriptionnoneIt sets no left border.hidden

CSS border-left Property

The border-left property in CSS is used to set all bottom left properties in one line. It is used to set the width, style, and color of the left border.Syntax: border-left: border-width border-style border-color|initial|inherit; border-left is a shorthand to set the below property values.Property Va