Border Radius class

/* 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 / radius */ border-radius: 10px / 20px; /* first radius => corner point to left or right side*/ /* second radius => corner point to top or bottom side*/ /* radius => corner point to both sides*/

Border-radius Add classes to an element to easily round its corners. <img src="..." alt="..." class="rounded"> <img src="..." alt="..." class="rounded-top"> <img src="..." alt="..." class="rounded-right"> <img src="..." alt="..." class="rounded-bottom"> <img src="..." alt="..." class="rounded-left"> <img src="..." alt="..." class="rounded-circle"> <img src="..." alt="..." class="rounded-0">

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;

Posted by: Guest on April-23-2021

Source

Code answers related to "Border Radius class"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Answers for "Border Radius class"

Code answers related to "Border Radius class"

Code answers related to "Whatever"

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us