본문 바로가기

Web 개발/[HTML,CSS]

[HTML/CSS] 7. 도형만들기

728x90

css코드

div{
    border-width: 10px;
    border-style: dashed;
    border-color: blue;
    width: 100px;
    height: 100px;
}

출력결과

 

border를 이용하여 테두리를 만들 수 있다.

 

border-width : 선 굵기

border-style : 선 모양

  • solid (실선)
  • dotted (점선)
  • dashed (대쉬선)
  • double (이중실선)

border-color : 선 색깔

 

css코드

div{
  border: 10px double darkgreen;
  width : 100px;
  height: 100px;
}

출력결과

css코드

 

div{
    border-top : 10px solid deeppink;
    border-left : 10px dashed black;
    border-right : 10px dotted green;
    border-bottom: 10px double pink;
    width:  100px;
    height: 100px;
}

출력결과

 

728x90

'Web 개발 > [HTML,CSS]' 카테고리의 다른 글

[HTML/CSS] 구글 클론 코딩  (0) 2022.07.13
[HTML/CSS] 8. Flex  (0) 2022.07.08
[HTML/CSS] 6. 단위와 위치  (0) 2022.07.03
[HTML/CSS] 5. 클래스 , 패딩과 마진  (0) 2022.07.01
[HTML/CSS] 4. css  (0) 2022.07.01