sol1)
<html>
<head>
<style type="text/css">
input {
width:200px;
height:200px;
border-width:5px;
border-style:solid;
border-color:black;
}
</style>
<script>
function d(){
a.style.borderStyle=a.value;
}
function e(){
b.style.borderStyle=b.value;
}
function f(){
c.style.borderStyle=c.value;
}
</script>
</head>
<body>
<input type="button" value="dashed" id="a" onclick="d()">
<input type="button" value="dotted" id="b" onclick="e()">
<input type="button" value="double" id="c" onclick="f()">
</body>
</html>
sol2)
<html>
<head>
<style type="text/css">
input {
width:200px;
height:200px;
border-width:5px;
border-style:solid;
border-color:black;
}
</style>
<script>
function f(n){
n.style.borderStyle=n.value;
}
</script>
</head>
<body>
<input type="button" value="dashed" onclick="f(this)">
<input type="button" value="dotted" onclick="f(this)">
<input type="button" value="double" onclick="f(this)">
</body>
</html>