Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc

 
 
 

How do you make a border radius round in CSS?

 
 

The border-radius property

 
The CSS border-radius property rounds the corners of an HTML element.
The three squares with rounded corners below are therefore distinguished by the value
set on border-radius: 15px, 25px and 35px.
.style-1 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 15px;
}

 
How do you make a border radius round in CSS?
 
.style-2 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 25px;
}

 
How do you make a border radius round in CSS?
 
.style-3 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 35px;
}

The value entered thus corresponds to the distance over which the rounding effect is applied
and is applied by default to the four corners of the element.
 
How do you make a border radius round in CSS?
 
 

How to distinguish the four angles of the form ?

 
To vary the four angles, you can use the four properties corresponding to the four angles.
 
How do you make a border radius round in CSS?
 
A simpler solution is to use the shortened version border-radius by specifying 2 or 4 values.
Entering two values ​​distinguishes the top left / bottom right corners from the top right / bottom left corners.
.style-4 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 0% 34% 0% 39%;
}

 
How do you make a border radius round in CSS?
 
Entering four values ​​distinguishes the four angles by rotating around the shape clockwise
starting from the top left corner.
.style-5 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 10% 20% 30% 40%;
}

 
How do you make a border radius round in CSS?
 
 

Distinctions of vertical and horizontal rays

 
In order to distinguish the horizontal rays from the vertical rays, it suffices to enter the two values
​​by separating them with a slash /. The value(s) entered before the slash apply to horizontal rays and
the value(s) entered after apply to vertical rays.
 
How do you make a border radius round in CSS?
 
In the following example, the horizontal rays are set to 40px for the four corners and the vertical
rays are set to 10px for the four corners.
.style-6 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 40px / 10px;
}

 
How do you make a border radius round in CSS?
 
By following the same rules as we saw previously, it is thus possible to enter up to eight angle values,
four for the horizontal angles and four for the vertical angles:
border-radius: Rh1 Rh2 Rh3 Rh4 / Rv1 Rv2 Rv3 Rv4 ;
 

Examples of shapes

 
 

Circle

.style-7 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 50px;
  /* or  with percent %*/ 
  border-radius: 50%;
}

 
How do you make a border radius round in CSS?
 
 

A thumbtack

.style-8 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 100% 0% 100% 100%;
}

 
How do you make a border radius round in CSS?
 
 

A quarter circle

.style-9 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 0% 0% 0% 100% 
}

 
How do you make a border radius round in CSS?
 
 

A lemon

.style-10 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 80% 10% 80% 10%;
}

 
How do you make a border radius round in CSS?
 
 

You can use this little tool to generate the css code

 

Risparmia sul tuo hotel - hotelscombined.com

dzosoft
Audio Software - Download Today & Save 10-50%
dzosoft
Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
dzosoft- How to do it ?
What they are cookies
Like most websites, we use data file small
dimensions that are saved on your computer, tablet, mobile phone or other device
Mobile (collectively referred to as 'device') to record certain data whenever
login or interact with our sites, services, apps, messaging systems
and strumenti.I names and specific types of cookies used can change over time.
To help you better understand the rules and \ 'use of such technology, the following are
some terms and their definitions:
Cookies: small text files (usually formed by letters and numbers) that are saved
in memory of the browser or the device when you visit a website or display a message.
Cookies enable a website to recognize a particular device or browser. There
different types of cookies:
Session cookies expire at the end of the browser session and allow us to
connect your actions during that specific session.
Persistent cookies are instead stored in your device even after the end
the browser session and let you remember your preferences or actions at multiple sites.
First-party cookies are set by the site you're visiting.
The third-party cookies are set by a third party site than the site you are visiting.
Cookies can be disabled or removed using the tools available in most
browsers. The cookie preferences must be set separately
for each browser used, because each offers features and specific options.
dzosoft.com - How to do it ?
Licenza Creative Commons
How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.