Jam's story

[CSS] border -css 테두리 본문

WEB/CSS

[CSS] border -css 테두리

애플쩀 2022. 5. 20. 11:16
  • border-style 은 필수이다. 주지 않으면 width, color가 적용되지 않는다. 
  • border 양식 - 두께, 스타일, 색상 
  • !important를 쓰면 우선적으로 설정(어느 태그 다 )
<p style="border: solid; border-width:15px;">solid</p>
<p style="border: dotted">dotted</p>
<p style="border: dashed">dashed</p>
<p style="border: double">double</p>
<p style="border: groove">groove</p>
<p style="border: ridge">ridge</p>
<p style="border: inset">inset</p>
<p style="border: outset">outset</p>
<p style="border: none">none</p>
<p style="border: hidden">hidden</p>

solid

dotted

dashed

double

groove

ridge

inset

outset

none

hidden

 

border-radius
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
p{border:2px solid red;
padding:10px;}
p.p2{
border-radius: 5px;
}
p.p3{
border-radius: 15px 10px;
}
p.p4{
border-top-left-radius:15px;
border-radius: 15px;
}
</style>
</head>
<body>
p[class]*4>lorem5
<p class="p1">Lorem ipsum dolor sit amet.</p>
<p class="p2">Voluptatibus repudiandae adipisci earum laboriosam!</p>
<p class="p3">Mollitia enim molestias itaque odit.</p>
<p class="p4">Fuga quasi unde autem aperiam!</p>
</body>
</html>
Insert title here p[class]*4>lorem5

Lorem ipsum dolor sit amet.

Voluptatibus repudiandae adipisci earum laboriosam!

Mollitia enim molestias itaque odit.

Fuga quasi unde autem aperiam!

저작자표시 (새창열림)

'WEB > CSS' 카테고리의 다른 글

[CSS] inherit (상속)  (0) 2022.05.20
[CSS] margin  (0) 2022.05.20
[CSS] 배경  (0) 2022.05.20
[CSS] 색상  (0) 2022.05.20
[CSS] 링크 달기 +우선순위  (0) 2022.05.19
'WEB/CSS' Related Articles more
Comments