CSS Borders
CSS Borders The CSS border properties allow you to specify the style, width, and color of an element's border. I have borders on all sides. I have a red bottom border. I have a blue left border. CSS Border Style The border-style property specifies what kin
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p {
width: 500px;
height: 50px;
text-indent: 30px; /* 들여쓰기 */
line-height: 50px; /* 수직정렬 */
margin: 20px;
}
button {
width: 200px;
height: 50px;
margin-left: 20px;
}
.dotted {
border-style: dotted;
}
.dashed {
border-style: dashed;
}
.solid {
border-style: solid;
}
.double {
border-style: double;
}
.style {
border-style: dotted solid;
}
.groove {
border-style: groove;
}
.ridge {
border-style: ridge;
}
.inset {
border-style: inset;
}
.outset {
border-style: outset;
}
.none {
border-style: none;
}
.hidden {
border-style: hidden;
}
.mix {
border-style: dotted dashed solid double; /* 순서: 상 우 하 좌 */
border-color: red blue green black;
}
.width {
border-style: dashed;
border-width: thin medium thick 8px;
}
.radius10 {
border-style: solid;
border-radius: 10px;
}
.radius30 {
border-style: solid;
border-radius: 30px;
}
.border {
border: 3px dashed indianred;
border-radius: 10px;
}
</style>
</head>
<body>
<p class="none">none border</p>
<p class="solid">solid border</p>
<p class="dotted">dotted border</p>
<p class="dashed">dashed border</p>
<p class="double">double border</p>
<p class="groove">groove border</p>
<p class="ridge">ridge border</p>
<p class="inset">inset border</p>
<p class="outset">outset border</p>
<p class="hidden">hidden border</p>
<p class="mix">mix border</p>
<p class="width">border-width</p>
<p class="radius10">border-radius=5px</p>
<p class="radius30">border-radius=20px</p>
<button class="basic">basic button</button>
<button class="border">border button</button>
</body>
</html>
'프론트엔드 > HTML & CSS' 카테고리의 다른 글
| [CSS] invalid property value (0) | 2021.07.05 |
|---|---|
| [HTML] 이클립스에서 HTML 파일을 JSP 파일로 변환하기 (0) | 2021.05.13 |