CSS 3 specials rounded corners in borders
Posted
by
Ruben
on Stack Overflow
See other posts from Stack Overflow
or by Ruben
Published on 2013-06-25T13:48:25Z
Indexed on
2013/06/26
4:21 UTC
Read the original article
Hit count: 158
How can I realise this special corner in my border with CSS3
This is what I got now:
http://jsfiddle.net/hashie5/nDv5k/
<aside>
<h2>Product in de kijker</h2>
<h3>Mobiele telefonie</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="btn btn-runa">Ga verder</a>
aside {
border: 1px solid #CCCC00;
border-radius: 10px;
padding: 5px 20px 20px 20px;
width: 290px;
margin: 50px;
}
body {
font-family:"Trebuchet MS";
color: #333333;
background-color: #FFFFFF;
font-size: 14px;
line-height: 150%;
}
h1 {
font-size: 30px;
color: #1F668C;
line-height: 120%;
font-weight: normal;
}
h2 {
font-size: 22px;
color: #CCCC00;
line-height: 120%;
font-weight: normal;
}
h3 {
font-size: 22px;
color: #1E678E;
line-height: 120%;
font-weight: normal;
}
h4 {
font-size: 20px;
color: #1E668C;
line-height: 120%;
font-weight: normal;
}
h5 {
font-size: 14px;
color: #CCCC00;
line-height: 120%;
font-weight: bold;
}
.btn-runa {
background: none;
background-color: #CCCC00;
color: #FFFFFF;
text-shadow: none;
}
© Stack Overflow or respective owner