border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;
background:skyblue;
padding:20px;
width:180px;
</style>
代码很简单不解释。
示例代码如下： div{ border:solid 5px bule; border-top-left-radius:10px; border-top-right-radius:20px; border-bottom-right-radius:30px; border-bottom-left-radius:40px;
DIV+CSS 制作
圆角边框
一种是利用
CSS3
，一种是利用布局模拟出圆
角
。1.利用
CSS3
，可以指定4个
角
都是圆
角
，或者某一个
角
是圆
角
非常方便，代码如下：
CSS样式#round {
background-color: #000;
border: 1px solid #000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
使用css给div添加四
角
边框的方法
div添加四
角
边框，一般写法，我们会在四
角
分别放一个小方块设置边框，来实现效果，但当我们使用vue,或者需要封装称组件时，例如大屏的展示，如果将边框也封单独的组件，或许会觉得封装的太繁琐。这个时候我们直接使用全局css来实现这一效果，少一层封装，这样代码更方便维护。以上均为小编个人见解，只为跟大家分享下面的方法。
首先前端使用class样式名字
<div class="global_echarts_box">
border-radius: 10px;
border-radius: 50%; //设置
半径
为宽度的一半
border-radius: 10px 20px 30px 40px; //顺时针设置
四个
角
的圆
半径
border-radius: 10px 20px; //设置左上右下为10px，右上左下为20px
border-top-left-radius: length; //单独设置左上
角
border-top-r
平常开发常会用到圆
角
，外凸很好实现，只要直接使用border-radius属性即可。但如果有内凹
角
的情况，一般都会直接使用背景图片，但如果没有背景图片的话，纯CSS也可以实现这种效果。
要实现这种内凹圆
角
比较简单，代码如下：
html:
<div class="radius"></div>
1. 选择要添加圆
角
的HTML元素。
2.使用border-radius属性来设置元素的圆
角
。该属性有
四个
值可以设置，前两个值设置左上
角
和右上
角
的圆
角
半径
，后两个值设置右下
角
和左下
角
的圆
角
半径
。示例代码如下：
border-radius: 10px 20px 30px 40px;
3. 在CSS样式表中添加border-radius属性并设置圆
角
值。
以下是一个完整的
CSS3
圆
角
的示例代码：
```html
<!DOCTYPE html>
<style>
div {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
</style>
</head>
<div></div>
</body>
</html>
此示例将一个div元素设置为圆形。将border-radius属性设置为50%会将
四个
角
的
半径
设置为元素宽度和高度的一半，从而创建一个圆形元素。
在上面的示例中，我们只设置了border-radius属性的第一个值。如果您只想设置某一个
角
的
半径
，便在该值上添加一个空格然后添加另一个值。
以下是将左上
角
和右下
角
设置为10px，同时将右上
角
和左下
角
设置为20px的示例：
```html
div {
width: 200px;
height: 200px;
border-radius: 10px 20px;
background-color: red;
请注意，如果元素的宽度和高度相等，则只需使用一个值来实现相同的圆弧效果。例如，以下代码将创建另一个圆形：
```html
div {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
