Home > Article > Web Front-end > How to set 4 rounded corners in css? css sets 4 rounded corner methods

How to set 4 rounded corners in css? css sets 4 rounded corner methods

云罗郡主Original: 2018-11-08 14:36:3814279browse

How to set css rounded border for div? What are the ways to set 4 rounded corners in css? This is relatively unfamiliar to CSS novices who have just started, so how to set 4 rounded corners in CSS? Let's take a look at the four rounded corner methods set in CSS. [Recommended Learning: CSS3 Tutorial]

CSS3 rounded corners are used to add special colored corners to the body or text by using the border-radius property. The simple syntax for rounded corners is as follows:

#rcorners7 {
   border-radius: 60px/15px;
   background: #FF0000;
   padding: 20px; 
   width: 200px;
   height: 150px; }

The following table shows the possible values for rounded corners as follows:

How to set 4 rounded corners in css? css sets 4 rounded corner methods

Example,This attribute Can have three values. The following example uses two values:

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 25px;
            background: #8AC007;
            padding: 20px;
            width: 200px;
            height: 150px;
         }
         #rcorners2 {
            border-radius: 25px;
            border: 2px solid #8AC007;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
         #rcorners3 {
            border-radius: 25px;
            background: url(/css/images/logo.png);
            background-position: left top;
            background-repeat: repeat;
            padding: 20px; 
            width: 200px;
            height: 150px;
         }
      </style>
   </head>
   <body>
      <p id = "rcorners1">Rounded corners!</p>
      <p id = "rcorners2">Rounded corners!</p>
      <p id = "rcorners3">Rounded corners!</p>
   </body></html>

The effect is:

How to set 4 rounded corners in css? css sets 4 rounded corner methods

## Each corner attribute:

We can specify each corner attribute, as shown in the following example:

<html>
   <head>
      <style>
         #rcorners1 {
            border-radius: 15px 50px 30px 5px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
         #rcorners2 {
            border-radius: 15px 50px 30px;
            background: #a44170;
            padding: 20px;
            width: 100px;
            height: 100px; 
         }
         #rcorners3 {
            border-radius: 15px 50px;
            background: #a44170;
            padding: 20px; 
            width: 100px;
            height: 100px; 
         }
      </style>
   </head>
   <body>
      <p id = "rcorners1"></p>
      <p id = "rcorners2"></p>
      <p id = "rcorners3"></p>
   </body><body>

The effect is as follows:

How to set 4 rounded corners in css? css sets 4 rounded corner methods

This article brings you how to set 4 rounded corners in CSS? Setting four rounded corners in CSS has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The above is the detailed content of How to set 4 rounded corners in css? css sets 4 rounded corner methods. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：css3 uses the animation attribute to achieve the effect of dynamic gradient of background color (code attached)Next article：css3 uses the animation attribute to achieve the effect of dynamic gradient of background color (code attached)

See more

How to set 4 rounded corners in css? css sets 4 rounded corner methods

Related articles