Css rounded corners div

How to Create a Round Corner Div in HTML CSS

You can add round corners to all four corners of a div using CSS’s border-radius property.

Start by creating your div.

 
Div With Rounded Corners
 
Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.
 
 

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

You can also create one, two, or three round corners of a div.

One Round Corner Div

Top Left Corner

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Top Right Corner

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Bottom Left Corner

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Bottom Right Corner

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Two Round Corners Div

You can create a two round corners div by targeting the appropriate corners using the border radius properties.

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Three Round Corners Div

You can also create a div with three rounded corners.

Dummy Content to be held in this div. Dummy Content to be held in this div. Dummy Content to be held in this div.

Hi there! I am Avic Ndugu.

I have published 100+ blog posts on HTML, CSS, Javascript, React and other related topics. When I am not writing, I enjoy reading, hiking and listening to podcasts.

Front End Developer Newsletter

Receive a monthly Frontend Web Development newsletter.
Never any spam, easily unsubscribe any time.

About

If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.

Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.

You can also use the HTML and CSS projects list as a source of projects to build as you learn HTML, CSS and JavaScript.

Start understanding the whole web development field now

Stop all the confusion and start understanding how all the pieces of web development fit together.

Never any spam, easily unsubscribe any time.

Recent Posts

Copyright © 2018 — 2023 DevPractical. All rights reserved.

Источник

CSS Rounded Corners

With the CSS border-radius property, you can give any element «rounded corners».

CSS border-radius Property

The CSS border-radius property defines the radius of an element’s corners.

Tip: This property allows you to add rounded corners to elements!

1. Rounded corners for an element with a specified background color:

2. Rounded corners for an element with a border:

3. Rounded corners for an element with a background image:

Example

#rcorners1 <
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
>

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius , border-top-right-radius , border-bottom-right-radius and border-bottom-left-radius properties.

CSS border-radius — Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values — border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value — border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Example

#rcorners1 <
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners4 border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

You could also create elliptical corners:

Example

#rcorners1 <
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

CSS Rounded Corners Properties

Property	Description
border-radius	A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius	Defines the shape of the border of the top-left corner
border-top-right-radius	Defines the shape of the border of the top-right corner
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner

Источник

border-radius

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset; 

The border-radius property is specified as:

Values

radius		Is a or a denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a or a denoting a radius to use for the border in the top-left and bottom-right corners of the element’s box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a or a denoting a radius to use for the border in the top-right and bottom-left corners of the element’s box. It is used only in the two- and three-value syntaxes.
top-left		Is a or a denoting a radius to use for the border in the top-left corner of the element’s box. It is used only in the three- and four-value syntaxes.
top-right		Is a or a denoting a radius to use for the border in the top-right corner of the element’s box. It is used only in the four-value syntax.
bottom-right		Is a or a denoting a radius to use for the border in the bottom-right corner of the element’s box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a or a denoting a radius to use for the border in the bottom-left corner of the element’s box. It is used only in the four-value syntax.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

border-radius: 1em/5em; /* It is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 

border-radius: 4px 3px 6px / 2px 4px; /* It is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; 

Formal definition

• border-top-left-radius : 0
• border-top-right-radius : 0
• border-bottom-right-radius : 0
• border-bottom-left-radius : 0

• border-bottom-left-radius : two absolute s or s
• border-bottom-right-radius : two absolute s or s
• border-top-left-radius : two absolute s or s
• border-top-right-radius : two absolute s or s

• border-top-left-radius : a length, percentage or calc();
• border-top-right-radius : a length, percentage or calc();
• border-bottom-right-radius : a length, percentage or calc();
• border-bottom-left-radius : a length, percentage or calc();

Formal syntax

Examples

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre> 

pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; > 

Live Samples

Specifications

Browser compatibility

BCD tables only load in the browser

Источник