Border-radius

Css rounded corners

/* Set rounded corners with border-radius property */

.class {
  border-radius: 4px;
}

.circle {
  border-radius: 50%;
}

Css border radius

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

How to make borders rounded in css

#rcorners {
  border-radius: 25px;
}

The border-radius Property

<!DOCTYPE html>
<html>
<head>
<style> 
#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;  
}
</style>
</head>
<body>

<h1>The border-radius Property</h1>

<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>

</body>
</html>

Border-radius

/*
	no need for perfixs it's now fully supported
	see: https://caniuse.com/?search=border-radius
*/

/* 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: unset;

-1

Source: developer.mozilla.org

Similar codes

0 vote359 views1 answer
Make the cursor appear as a crosshair on all links of the web page:
CSS
1 vote336 views1 answer
Border bottom under text only
CSS
-1 vote351 views1 answer
Arranging the paragraph in css
CSS
0 vote329 views1 answer
Unclickable button
CSS
2 votes330 views2 answers
Bootstrap icons in angular
CSS
0 vote372 views1 answer
Make table cell less wide css
CSS
74 votes384 views6 answers
Flex css
CSS
46 votes322 views6 answers
Font color css
CSS
0 vote339 views2 answers
Ssh: connect to host 165.22.132.219 port 22: Connection refused
CSS
61 votes356 views2 answers
Bootstrap flex direction column
CSS