HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use

HTML+CSS box model example (circle, semicircle, etc.) "border-radius" is simple and easy to use

Many friends found that the box model is a square by default when learning the front-end. How to turn the box into the desired model? First, let's take a look at the default situation----

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(116, 51, 51);
            box-shadow:0 10px 10px red;
            text-align: center;
            position:absolute;
            margin:0 auto;   
            left:0;
            right:0;
            bottom:0;
            top:0;

        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

The default setting is a square, which may not look good to you. Let’s try a round one!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: rgb(28, 99, 60);
            border: 5px solid rgb(55, 0, 255);
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>Round</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Look how round we are! Let’s take a look at the semicircular one!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 50px;
            background-color: rgb(175, 42, 216);
            border: 3px solid rgb(26, 236, 26);
            border-top-right-radius: 50px;
            border-top-left-radius: 50px;
            position:absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    </style>
    <title>semicircle</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Let’s try other shapes!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgb(82, 84, 223);
            border-radius: 20px 15px 20px 10px;
            position: absolute;
            margin: 0 auto;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
        }
    </style>
    <title>demo</title>
</head>
<body>
    <div class="box">

    </div>
</body>
</html>

insert image description here

Knowledge point analysis:

border-radius: Setting a rounded border for an element can create various rounded shapes such as circles, semicircles, ellipses, and quarter circles.
Four values ​​can be set, namely upper left, upper right, lower right, and lower left. Here is a mnemonic: "Start from the upper left and move clockwise." . .

I hope this article has taught you how to use the border-radius property!

This concludes this article on the simple introduction to the HTML+CSS box model case (circle, semicircle, etc.) "border-radius". For more relevant HTML+CSS box model content, please search 123WORDPRESS.COM's previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<:  How to fix some content in a fixed position when scrolling HTML page

>>:  HTML realizes hotel screening function through form

Recommend

Detailed explanation of the installation steps of the MySQL decompressed version

1. Go to the official website: D:\mysql-5.7.21-wi...

Linux Operation and Maintenance Basic System Disk Management Tutorial

1. Disk partition: 2. fdisk partition If the disk...

Solution to VMware virtual machine no network

Table of contents 1. Problem Description 2. Probl...

JavaScript implements div mouse drag effect

This article shares the specific code for JavaScr...

Mac+IDEA+Tomcat configuration steps

Table of contents 1. Download 2. Installation and...

Detailed explanation of reduce fold unfold usage in JS

Table of contents fold (reduce) Using for...of Us...

Detailed explanation of several ways to create a top-left triangle in CSS

Today we will introduce several ways to use CSS t...

Web page printing thin line table + page printing ultimate strategy

When I was printing for a client recently, he aske...

MyBatis dynamic SQL comprehensive explanation

Table of contents Preface Dynamic SQL 1. Take a l...

Mini Program to implement Token generation and verification

Table of contents process Demo Mini Program Backe...

Four ways to compare JavaScript objects

Table of contents Preface Reference Comparison Ma...

How to install MySQL 8.0.17 and configure remote access

1. Preparation before installation Check the data...

Detailed explanation of the use of $emit in Vue.js

1. Parent components can use props to pass data t...

Linux uses join -a1 to merge two files

To merge the following two files, merge them toge...

Linux user script creation/guessing game/network card traffic monitoring introduction

Table of contents 1. User created script 2. Word ...