## border-top-left-radius 屬性
## 屬性定義及使用說明
border-top-left-radius屬性定義了左上角的邊框形狀。
**提示:** 這個屬性允許你為元素添加圓角邊框!
JavaScript 語法:object object.style.borderTopLeftRadius="5px"
* * *
## 語法
```
border-top-left-radius: *length*|*%* \[*length*|*%*\];
```
**注意:** border-top-left--radius屬性的兩個長度或百分比值定義了橢圓的四分之一外邊框的邊緣角落的形狀。第一個值是水平半徑,第二個是垂直半徑。如果省略第二個值,它是從第一個復制。如果任一長度為零,角落里是方的,不圓潤。水平半徑的百分比是指邊界框的寬度,而垂直半徑的百分比是指邊界框的高度。
| 值 | 描述 |
| :-- | :-- |
| *length* | 定義左上角的形狀。 |
| *%* | 使用%定義左上角的形狀。 |
* * *
## 實例--為div元素的左上角添加一個圓角邊框:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div
{
border:2px solid;
padding:10px;
background:#dddddd;
border-top-left-radius:2em;
-webkit-border-top-left-radius:2em; /* Safari */
}
</style>
</head>
<body>
<div>The border-top-left-radius property allows you to add a rounded border to the top-left corner.</div>
</body>
</html>
```
- CSS常用樣式控制
- background--背景
- Text--文本
- CSS屬性
- align-*
- animation-*
- appearance
- backface-visibility
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-repeat
- background-size
- border
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-image
- border-image-outset
- border-image-repeat
- border-image-source
- border-image-width
- Border-left
- border-left-color
- border-left-style
- border-left-width
- border-image-slice
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-shadow
- box-sizing
- caption-side
- clear
- clip
- color
- column-count
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- content
- counter-increment
- counter-reset
- cursor
- direction
- display
- Empty-cells
- filter(濾鏡)
- CSS 偽元素選擇器
- :active 選擇器
- :after 選擇器
- :before 選擇器
- :checked 選擇器
- :disabled 選擇器
- :empty 選擇器
- :enabled 選擇器
- :first-child 偽元素
- :first-letter 偽元素
- :first-line 偽元素
- :first-of-type 選擇器
- :focus 選擇器
- :hover 選擇器