๐ปborder-radius๐ป
์์์ ํ
๋๋ฆฌ๋ฅผ ๋ฅ๊ธ๊ฒ ๋ง๋ค์ด์ฃผ๋ ์ญํ ์ ํ๋ค.
์ด๋ฅผ ์ฌ์ฉํ์ฌ ์ฌ๊ฐํ ์์์ ๋ชจ์๋ฆฌ๋ฅผ ๋ถ๋๋ฝ๊ฒ ๋ง๋ค๊ฑฐ๋, ์ํ ์์๋ฅผ ๋ง๋ค ์ ์๋ค.
border-radius๋ ๋ค ๊ฐ์ ๊ฐ ๋๋ ํ๋์ ๊ฐ์ผ๋ก ์ฌ์ฉ๋๋ค
ํ๋์ ๊ฐ : ๋ชจ๋ ๋ค ๋ชจ์๋ฆฌ์ ๋์ผํ ๊ฐ์ด ์ ์ฉ๋๋ค. ๋ ๊ฐ์ ๊ฐ : ์ฒซ ๋ฒ์งธ ๊ฐ์ ์ผ์ชฝ ์ ์ค๋ฅธ์ชฝ ์๋ ์ค๋ฅธ์ชฝ ์ ์ผ์ชฝ ์๋ ์ธ ๊ฐ์ ๊ฐ : ์ฒซ ๋ฒ์งธ ๊ฐ์ ์ผ์ชฝ ์ ์ผ์ชฝ ์๋์ ์ค๋ฅธ์ชฝ ์ ์ค๋ฅธ์ชฝ ์๋ ๋ค ๊ฐ์ ๊ฐ : ๊ฐ๊ฐ ์ผ์ชฝ ์, ์ค๋ฅธ์ชฝ ์, ์ค๋ฅธ์ชฝ ์๋, ์ผ์ชฝ ์๋์ ๋ชจ์๋ฆฌ์ ๊ฐ๊ฐ์ ๊ฐ์ด ์ ์ฉ๋ฉ๋๋ค.
<body>
<div id="box">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae, incidunt esse quaerat error quasi eius numquam voluptas itaque accusantium pariatur, ullam velit, atque labore doloribus veniam veritatis odit nihil mollitia.</div>
</body>
๐ถpx ๐ถ
(width or height)์ 1/2์ด ์
๋ ฅ๊ฐ์ ์ต๋๊ฐ์ด๋ค.
<style>
#box {
border: 1px solid black;
width: 300px;
height: 300px;
margin: 50px;
border-radius: 10px;
}
</style>
๐ถ % ๐ถ
๋ถ๋ชจ ์์์ ํฌ๊ธฐ
<style>
#box {
border: 1px solid black;
width: 300px;
height: 200px;
margin: 50px;
border-radius: 50%;
}
</style>
๐ถ ๊ฐ ๋ชจ์๋ฆฌ๋ง๋ค ์ค์ ๐ถ <style>
#box {
border: 1px solid black;
width: 300px;
height: 200px;
margin: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
</style>
๐ถ ์ด๋ฏธ์ง ๋ฅ๊ธ๊ธฐ๐ถ <div id="cat">
<img src="../asset/images/cat01.jpg">
<img src="../asset/images/cat02.jpg">
</div> <style>
#cat img {
border-radius: 15px;
}
</style>
